jQuery – validar grupo de checkbox con jQuery Validate

Existe un pligin llamado Validate que puede utilizarse para validar un formulario. Seguro que muchos de vosotros ya lo sabréis. Pero cómo validamos que en un formulario, al menos se seleccione un checkbox de un grupo de ellos.

Para empezar, aquí tenéis el enlace de Validate:

Como sabréis, debéis tener la librería cargada desde el header o el footer de la página:

1
2
<script src="https://www.mipagina.com/librerias/jquery.min.js"></script>
<script src="https://www.mipagina.com/librerias/jquery.validate.min.js"></script>

En el formulario crearéis los checkbox del siguiente modo:

1
2
3
4
5
6
7
8
9
10
11
<form id="formposicionjugadores" action="/posicionjugadores.php" method="post">
    ...
    <ul>
        <li><input type="checkbox" name="name='filtros[]'" value="rubios" /> Delantero</li>
        <li><input type="checkbox" name="name='filtros[]'" value="medio" /> Medio</li>
        <li><input type="checkbox" name="name='filtros[]'" value="defensa" /> Defensa</li>
        <li><input type="checkbox" name="name='filtros[]'" value="portero" /> Portero</li>
    </ul>
    ...
    <div id="consolaerror" class="consola"></div>
</form>

Aquí debéis fijaros que el nombre de los checkbox es filtros[]. De esta manera creamos un grupo de checkbox que con Validate podremos tratar.

Una vez tenemos los checkbox como conjunto, ahora ponemos el código Javascript que hará que nos valide que hayamos seleccionado, al menos uno de ellos. Lo haremos gracias a Validate:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    $(document).ready(function () {
        $("#formposicionjugadores").validate({
                rules: {
                    "filtros[]": {required: true}
                },
                messages: {
                    "filtros[]": "Debe escoger un sector obligatoriamente."
                },
                errorLabelContainer: $('#consolaerror')
        });
    });
</script>

Como podéis ver, se trata el campo filtros[0] que corresponde al grupo de checkbox, y como regla ponemos que sea required (requerido). Si no se selecciona alguno de ellos, muestra el mensaje correspondiente, en el div con id consolaerror.

Espero que os sea de ayuda.

Artículos relacionados

jQuery UI – Tutorial 3 – Widget Date P... Breve tutorial que se muestra cómo utilizar el widget Date Picker de la librería jQuery UI. Un widget que facilita al usuario insertar una fecha en un...
jQuery – Conseguir el texto de la opción sel... En un desplegable, nos puede interesar saber el texto que se muestra de la opción seleccionada. Lo veremos mucho mejor con un ejemplo que puede aclara...
jQuery – Cómo seleccionar una opción de Sele... Ya vimos en artículos anteriores cómo seleccionar una opción de un desplegable (select) por su valor. En este artículo vamos a ver cómo seleccionarlo ...
jQuery – Tutorial 02 – Puesta en march... Segundo tutorial de 7 minutos que muestra cómo llamar a la librería desde nuestra página, sea con la librería descargada como llamada a librería aloja...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*