miércoles, 27 de julio de 2011

ASP.NET – Validar que se seleccione al menos un elemento del checkboxlist

checkboxlist_validate Este es una pregunta bastante frecuente en los foros, así que vale la apena incluirlo en el blog para usarse como referencia.
Para asegurarnos que se seleccione al menos un elemento del checkboxlist, vamos a usar el control de validación llamado CustomValidator, el cual trabaja con una función javascript y adicionalmente verifica del lado del servidor (por si las pulgas) ;)
Vamos al código de una vez:
añade una página aspx  y pega el sgte código:

<html>
<head runat="server">
<title>Validar que se seleccione al menos un elemento del checkboxlist</title>

<script type="text/javascript">
function CheckIfCheckBoxListIsChecked(source, args) {
var chkList = document.getElementById('<%= chkFindAt.ClientID %>');
var chk = chkList.getElementsByTagName("input");
for (var i = 0; i < chk.length; i++) {
if (chk[i].checked) {
args.IsValid = true;
return;
}
}
args.IsValid = false;
}      
</script>

</head>
<body>
<form id="form1" runat="server">

<asp:CheckBoxList ID="chkFindAt" runat="server">
<asp:ListItem Value="1" Text="ASP.NET"></asp:ListItem>
<asp:ListItem Value="2" Text="JAVA"></asp:ListItem>
<asp:ListItem Value="3" Text="PHP"></asp:ListItem>
</asp:CheckBoxList>
<asp:CustomValidator ID="CustomValidator1" runat="server" 
ClientValidationFunction="CheckIfCheckBoxListIsChecked"
OnServerValidate="CheckIfCheckBoxListIsCheckedServer" 
ErrorMessage="Seleccione al menos un elemento!"
Display="Dynamic"></asp:CustomValidator>

<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
Y el código del lado del servidor sería el sgte:

Protected Sub CheckIfCheckBoxListIsCheckedServer(ByVal source As Object, _
ByVal args As ServerValidateEventArgs) Handles CustomValidator1.ServerValidate

If chkFindAt.SelectedIndex = -1 Then
args.IsValid = False
Else
args.IsValid = True
End If

End Sub

Como han podido observar, la función del lado del cliente (javascript) es llamada mediante ClientValidationFunction y el método del lado del servidor es llamado a través de OnServerValidate.

Así de simple, cualquier duda, consulten nomás.

Espero que les sea de utilidad ;)

6 comentarios:

Miguel Angel dijo...

Buenas he intentado implementarlo pero no me funciona, no me meustra el mensaje de Seleccione al menos un elemento.
No se lo que me falta?

Segundo Serrano dijo...

Hola Miguel,
tendrías que mostrarnos tu código, de repente algo está faltando.
Saludos

Miguel Angel dijo...

Si me das tu correo te lo envío para que lo eches un vistazo. El mio es magarevalo@gmail.com

Anónimo dijo...

Esta muy bueno me funciono bien!!!!!

DiegoR dijo...

Buenos días,

el post está muy bueno, lo que pasa es que no he podido implementarlo en C#, puedes por favor ayudarme con esto? mil gracias por tu tiempo.

Feliz día.

Unknown dijo...

MUY BUENO!!! me funcionó de diez en C#. Necesitaba la parte en JS