febrero 2016

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');
    }
});

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');
    }
});