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