5 formar de validar checkbox

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

Me fascina la programación en diversos lenguajes y mas aún si son sistemas web o páginas web.

Entradas relacionadas

Integrar Bootstrap 3 Badge Colors

Integrar Bootstrap 3 Badge Colors

En este artículo vamos a integrar colores de fondo en la clase BADGE de Bootstrap 3. Integrar Bootstrap 3 Badge Colors. En el framework Bootstrap 3 por…

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX?. Lo que haremos será trabajar en un div al hacer clic con el mouse usando jQuery, use el método toggle(). Por…

Enviar formulario usando checkbox

Enviar formulario usando checkbox

Enviar formulario usando checkbox. En este articulo veremos una forma de enviar un formulario HTML usando una casilla o varias casillas de verificación (checkbox). Por lo tanto,…

Limpiar Select2 jQuery

Limpiar Select2 jQuery: Ejemplo completo

Limpiar Select2 jQuery. En este articulo aprenderemos a restablecer para mostrar el marcador de posición select2. JQuery Select2 restablece y luego muestra el marcador de posición. Por…

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP. La mayoría de sistemas web o de escritorio trabajan con importación de registros hacia la base de datos para optimizar…

Array dentro de ciclo Foreach PHP

Array dentro de ciclo Foreach PHP: ejemplo completo

Array dentro de ciclo Foreach PHP. A veces se requiere validar si existe un elemento de un ARRAY dentro de un ciclo While o ciclo foreach en…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *