En este tutorial vamos a aprender como validar Checkboxes, Radiobuttons y Selects(menus desplegables) del lado del cliente usando JavaScript + jQuery.
HTML
Para el ejemplo usaremos un formulario que tenga los 3 elementos, después del formulario incluimos a jQuery y por ultimo abrimos un script y registramos el evento en que el formulario sea enviado(submit):
<form action="" class="validar_form" method="post">
<h2>Checkbox</h2>
<div><input type="checkbox" name="chck[]" value="opt 1 chckd" /><label>Opt 1</label></div>
<div><input type="checkbox" name="chck[]" value="opt 2 chckd" /><label>Opt 2</label></div>
<div><input type="checkbox" name="chck[]" value="opt 3 chckd" /><label>Opt 3</label></div>
<div class="errors error1"></div>
<h2>Radio</h2>
<div><input type="radio" name="gruporad" value="rad 1 chckd" /><label>Radio 1</label></div>
<div><input type="radio" name="gruporad" value="rad 2 chckd" /><label>Radio 2</label></div>
<div><input type="radio" name="gruporad" value="rad 3 chckd" /><label>Radio 3</label></div>
<div class="errors error2"></div>
<h2>Select</h2>
<div>
<select name="select">
<option value="" selected>------</option>
<option value="select 1 chckd">Opcion 1</option>
<option value="select 1 chckd">Opcion 2</option>
<option value="select 1 chckd">Opcion 3</option>
</select>
<div class="errors error3"></div>
</div>
<button class="enviar">Enviar</button>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(".validar_form").submit( function(){
// Aqui ira nuestro codigo
});
</script>
Fijaos que después de cada grupo de elementos estoy poniendo un div.errors vacío, allí es donde iran los mensajes de error de validación.
JavaScript
Crearemos 3 variables que contendrán los valores de los checkbox, radiobuttons y selects respectivamente, fijaos que en los 3 estamos seleccionando el elemento en un estado especifico(:checked, :checked y :selected) esto es para que solo obtenga el valor si estos están marcados/seleccionados, en caso contrario el valor de la variable seria 0:
$(".validar_form").submit(function () {
var check = $("input[type='checkbox']:checked").length;
var radio = $("input[type='radio']:checked").length;
var select = $("select option:selected").val();
});
En el caso de checkbox y de radiobuttons se usa .length para determinar el numero de caracteres que existen en la variable, ósea si en el checkbox seleccionan 2 opciones el length vendría a ser 2.
Validación
Ahora validaremos el formulario usando unas cuantas condiciones, primero si la variable check esta vacía mostramos .error1 y hacemos return false; para que el form no se envie, hacemos lo mismo con los radio y con el select, en caso que el usuario rellene el formulario correctamente ocultamos los errores y lanzamos un alert(«Ok») seguido de un return true; que enviara el formulario:
if (check == "") {
$('.error1').text("Seleccione al menos un checkbox");
return false;
} else if (radio == "") {
$('.error2').text("Seleccione un radio button");
return false;
} else if (select == "") {
$('.error3').text("Seleccione una opcion");
return false;
} else {
$('.errors').hide();
alert('Ok!');
return true;
}
Código Completo
$(".validar_form").submit(function () {
var check = $("input[type='checkbox']:checked").length;
var radio = $("input[type='radio']:checked").length;
var select = $("select option:selected").val();
if (check == "") {
$('.error1').text("Seleccione al menos un checkbox");
return false;
} else if (radio == "") {
$('.error2').text("Seleccione un radio button");
return false;
} else if (select == "") {
$('.error3').text("Seleccione una opcion");
return false;
} else {
$('.errors').hide();
alert('Ok!');
return true;
}
});