Validar checkbox y radiobutton con jQuery

Validar checkbox y radiobutton con jQuery

En los artículos anteriores hemos visto como validar campos de texto y campos select utilizando jQuery. En esta ocasión vamos a validar campos tipo checkbox y tipo 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 checkbox 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 ven 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 código:

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

    //Se verifica si alguno de los checks esta seleccionado
    if ($('input[name="colors"]').is(':checked')) {
        alert('Campo correcto');
    } else {
        alert('Se debe seleccionar por lo 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.

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() {

    //Se verifica si alguno de los radios esta seleccionado
    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.

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

Comentarios

Deja tu comentario

http://