baulcode
5 formar de validar checkbox. Aquí mostrare varias formas de validar checkbox usando jQuery y JavaScript, también usaremos funciones a nivel de formulario.
Aquí debéis fijaros que el nombre de los checkbox es filtros[]. De esta manera creamos un grupo de checkbox que podemos procesar.
¿Como podemos validar checkbox?
Una vez tenemos un grupo de checkbox, podemos aplicar el código JavaScript que hará que nos valide que hayamos seleccionado, al menos uno de ellos. Lo haremos gracias a las siguientes formas:
Primera forma
<form action="" method="post"> <fieldset> <legend>Seleccione al menos un valor</legend> <div> <label> <span>Valor 1</span> <input type="checkbox" name="valor1" /> </label> </div> <div> <label> <span>Valor 2</span> <input type="checkbox" name="valor1" /> </label> </div> <div> <label> <span>Valor 3</span> <input type="checkbox" name="valor1" /> </label> </div> <div> <button type="submit">Enviar</button> </div> </fieldset> </form>
Código jQuery
Esta instrucción lo que hará será de contar y detectar si un input de tipo checkbox ha sido marcado por el usuario final.
$('form').submit(function(e){
if ($('input[type=checkbox]:checked').length === 0) {
e.preventDefault();
alert('Debe seleccionar al menos un valor');
}
});
Segunda forma de validar Checkbox
Podemos detectar y/o validar Checkbox Marcado y lo podemos hacer usando la funcion is() tienes que usar el selector :checked:
En este ejemplo haremos uso de una casilla de verificación que se suele usar en los formularios para que acepten los términos y condiciones de uso de un determinado programa.
$(document).ready(function() {
$("#submit").on("click", function() {
var condiciones = $("#aceptar").is(":checked");
if (!condiciones) {
alert("Debe aceptar las condiciones");
event.preventDefault();
}
});
});Si el usuario final no ha marcado las condiciones debes usar event.preventDefault() para evitar que el formulario haga el post.
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> <form action=""> <div> <p>Correo: </p> <input type="email" name="correo" id="correo"> </div> <div> <p>Telefono: </p> <input type="text" name="telefono" id="telefono"> </div> <div> <p>Aceptar condiciones: </p> <input type="checkbox" name="aceptar" id="aceptar"> </div> <button type="submit" id="submit">Enviar Formulario </button> </form>
Tercera forma: Validar condiciones de uso chexkbox
Este es otro ejemplo donde podrás implementar para lograr el mismo objetivo.
$(function(){
$("#submit").click(function(event){
var seleccion = $("#aceptar")[0].checked;
if(!seleccion){
event.preventDefault();
alert("Acepta las condiciones");
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <form action=""> <a>Correo: </a><input type="email" name="correo"><br> <a>Telefono: </a><input type="text" name="telefono"><br> <a>Aceptar condiciones: </a><input type="checkbox" name="aceptar" id="aceptar" ><br> <button type="submit" id="submit">Enviar Formulario </button> </form>
Otras opciones para validar
Solo pregunta si esta checkeado con .is(':checked'):
$('form').on('submit', function(){
if($("input[type='checkbox']").is(':checked') === true)
console.log('Soy valido')
else{
console.log('Soy invalido')
return false; //Soy invalid
}
})Función para validar checkbox
function testcheck()
{
if (!jQuery("#checkbox").is(":checked")) {
alert("none checked");
return false;
}
return true;
}
Y aquí está el código HTML:
<input type="submit" value="Send" onclick="return testcheck()" />
Conclusion
En este articulo hemos visto varios tipos para validar un input de tipo checkbox para validar en el envío del formulario HTML.
También, hemos visto el uso de una función jQuery usando ONCLICK
