Validar checkbox y radiobutton con jQuery

Validar checkbox y radiobutton con jQuery
  • Eborio Linárez
  • October 16, 2013
  • 0

En las publicaciones anteriores hemos visto como validar campos de texto y select utilizando jQuery. En esta ocasión vamos a validar campos tipo checkbox y radiobutton para garantizar que el usuario seleccione por lo menos una opción en el caso de los checkbox; y que seleccione alguna opción en el caso de los radiobuttons.

Validar checkbox

Para validar los checkboxes partiremos del siguiente código.

<input type="checkbox" name="colors" id="red">
<label for="red">Rojo</label>

<input type="checkbox" name="colors" id="green">
<label for="green">Verde</label>

<input type="checkbox" name="colors" id="blue">
<label for="blue">Azul</label>

Como pueden apreciar se trata de un conjunto de checkboxes que poseen el nombre colors y a diferencia de otros tipos de campos, aquí no podemos validar utilizando el ID del campo debido a que cada check posee uno diferente. Por lo tanto utilizaremos el siguiente script.

$('#validate').click(function() {

    if ($('input[name="colors"]').is(':checked')) {
        alert('Campo correcto');

    } else {
        alert('Debe seleccionar al menos un color');
    }
});

Noten que se valida el campo a través de su atributo name ya que todos los checks poseen el mismo nombre. Para la validación se utiliza el método is() de jQuery y se utiliza el selector :checked para determinar si se seleccionó o no algún checkbox.

Veamos el código en funcionamiento antes de continuar.

See the Pen Validar checkbox con jQuery by Eborio Linárez (@eborio) on CodePen.

Validar radiobutton

El proceso para validar radiobuttons es el mismo usado para validar checkbox. Vamos a utilizar el siguiente código.

<input type="radio" name="languages" id="spanish">
<label for="spanish">Español</label>

<input type="radio" name="languages" id="english">
<label for="english">Inglés</label>

<input type="radio" name="languages" id="italian">
<label for="italian">Italiano</label>

Al igual que con los checks todos los radios deben tener el mismo nombre y poseer ID's diferentes por lo cual no podemos validar usando ese atributo sino el atributo name.

El código necesario para validar los radiobuttons es el siguiente.

$('#validate').click(function() {

    if ($('input[name="languages"]').is(':checked')) {
        alert('Campo correcto');

    } else {
        alert('Se debe seleccionar un idioma');
    }
});

Como ven es exactamente igual al código para validar los checkbox. La única diferencia es que se cambia el nombre del campo por el correspondiente.

Ahora veamos como se comporta el código en vivo.

See the Pen Validar radiobutton con jQuery by Eborio Linárez (@eborio) on CodePen.

Espero haberles ayudado y en el siguiente post veremos de que manera validar campos tipo email para que posean una dirección de correo correcta.

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario