jQuery validar marcar al menos una casilla de verificación

Question

tengo algo como esto:

<form> 
<input name='roles' type='checkbox' value='1' /> 
<input name='roles' type='checkbox' value='2' /> 
<input name='roles' type='checkbox' value='3' /> 
<input name='roles' type='checkbox' value='4' /> 
<input name='roles' type='checkbox' value='5' /> 
<input type='submit' value='submit' /> 
<form> 

me gustaría validar que al menos una casilla de verificación (roles) deben ser revisados, es posible que con jquery.validate?

Answer 1

El complemento de validación solo validará el elemento actual/enfocado. Por lo tanto, deberá agregar una regla personalizada al validador para validar todas las casillas de verificación. Similar a la respuesta anterior.

$.validator.addMethod("roles", function(value, elem, param) { 
    if($(".roles:checkbox:checked").length > 0){ 
     return true; 
    }else { 
     return false; 
    } 
},"You must select at least one!"); 

y en el elemento:

<input class='{roles: true}' name='roles' type='checkbox' value='1' /> 

Además, es probable encontrar la pantalla mensaje de error, no es suficiente. Solo se resalta 1 casilla de verificación y solo se muestra 1 mensaje. Si hace clic en otra casilla de verificación separada, que luego devuelve una casilla de verificación válida para la segunda, la original sigue marcada como no válida y el mensaje de error sigue apareciendo, a pesar de que el formulario sea válido. Siempre he recurrido a mostrar y ocultar los errores en este caso. El validador solo se encarga de no enviar el formulario.

La otra opción que tiene es escribir una función que cambie el valor de una entrada oculta para que sea "válida" al hacer clic en una casilla de verificación y luego adjuntar la regla de validación al elemento oculto. Sin embargo, esto solo se validará en el evento onSubmit, pero mostrará y ocultará mensajes en el momento apropiado. Esas son las únicas opciones que puede usar con el complemento de validación.

Espero que ayude!

Answer 2

Mmm primero sus atributos id debe ser único, su código es probable que sea

<form> 
<input class='roles' name='roles' type='checkbox' value='1' /> 
<input class='roles' name='roles' type='checkbox' value='2' /> 
<input class='roles' name='roles' type='checkbox' value='3' /> 
<input class='roles' name='roles' type='checkbox' value='4' /> 
<input class='roles' name='roles' type='checkbox' value='5' /> 
<input type='submit' value='submit' /> 
</form> 

para su problema:

if($('.roles:checkbox:checked').length == 0) 
    // no checkbox checked, do something... 
else 
    // at least one checkbox checked... 

PERO, recuerde que una forma de validación JavaScript es sólo indicativa, toda las validaciones DEBEN hacerse en el lado del servidor.

Answer 3

Ejemplo de https://github.com/ffmike/jquery-validate

<label for="spam_email"> 
    <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" validate="required:true, minlength:2" /> Spam via E-Mail </label> 
<label for="spam_phone"> 
    <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" /> Spam via Phone </label> 
<label for="spam_mail"> 
    <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" /> Spam via Mail </label> 
<label for="spam[]" class="error">Please select at least two types of spam.</label> 

El mismo sin campo "validar" en las etiquetas solamente usando javascript:

$("#testform").validate({ 
    rules: { 
      "spam[]": { 
        required: true, 
        minlength: 1 
      } 
    }, 
    messages: { 
      "spam[]": "Please select at least two types of spam." 
    } 
}); 

Y si necesita diferentes nombres para las entradas, puede utilizar somethig como esto:

<input type="hidden" name="spam" id="spam"/> 
<label for="spam_phone"> 
    <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam_phone" /> Spam via Phone</label> 
<label for="spam_mail"> 
    <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam_mail" /> Spam via Mail </label> 

Javascript:

$("#testform").validate({ 
    rules: { 
     spam: { 
      required: function (element) { 
       var boxes = $('.checkbox'); 
       if (boxes.filter(':checked').length == 0) { 
        return true; 
       } 
       return false; 
      }, 
      minlength: 1 
     } 
    }, 
    messages: { 
      spam: "Please select at least two types of spam." 
    } 
}); 

He añadido entrada oculta antes de insumos y se establece que "exigen" si no hay casillas de verificación seleccionadas

Answer 4

Ésta es la forma en que he tratado con él en el pasado:

$().ready(function() {              
    $("#contact").validate({ 
     submitHandler: function(form) { 
      // see if selectone is even being used 
      var boxes = $('.selectone:checkbox'); 
      if(boxes.length > 0) { 
       if($('.selectone:checkbox:checked').length < 1) { 
        alert('Please select at least one checkbox'); 
        boxes[0].focus(); 
        return false; 
       } 
      } 
      form.submit(); 
     } 
    }); 

}); 

Answer 5

maquillaje Asegúrese de que input-name[] esté en comas invertidas en el conjunto de reglas.Me tomó horas encontrar esa parte.

$('#testform').validate({ 
    rules : { 
    "name[]": { required: true, minlength: 1 } 
    } 
}); 

Lea más aquí ... http://docs.jquery.com/Plugins/Valid...ets.2C_dots.29

Answer 6

$("#idform").validate({ 
    rules: {    
     'roles': { 
      required: true, 
     }, 
    }, 
    messages: {    
     'roles': { 
      required: "One Option please", 
     }, 
    } 
}); 

Answer 7

Es muy probable que usted quiere tener un texto al lado de la casilla de verificación. En ese caso, se puede poner en la casilla dentro de una etiqueta como lo hago a continuación:

<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="72" aria-required="true" class="error"> All Over</label> 
<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="73" aria-required="true" class="error"> All Over X2</label> 

El problema es que cuando se muestra el mensaje de error, que va a ser insertado después de la casilla, pero antes de que el texto, por lo que es ilegible. Con el fin de arreglar eso, he cambiado la función de la colocación de error:

if (element.is(":checkbox")) { 
    error.insertAfter(element.parent().parent()); 
} 
else { 
    error.insertAfter(element); 
} 

Depende de su diseño, pero lo que he hecho es tener una colocación de error especial para controles de chequeo. Obtengo el padre de la casilla de verificación, que es una etiqueta, y luego obtengo el padre, que es un div en mi caso. De esta forma, el error se coloca debajo de la lista de controles de casilla de verificación.

Answer 8

sir_neanderthal ya ha publicado una respuesta agradable.

sólo quiero señalar que si se quisiera utilizar diferentes nombres para sus entradas también se puede utilizar (o simplemente copiar el método) require_from_group method de jQuery Validación -methods.js adicionales oficiales (link to CDN for version 1.13.1) .