Regla personalizada y atributo de datos
Puede crear una regla personalizada y adjuntarla a un elemento usando el data
atributo usando la sintaxisdata-rule-rulename="true";
Entonces, para verificar si al menos una de un grupo de casillas está marcada:
data-rule-oneormorechecked
<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" />
addMethod
$.validator.addMethod("oneormorechecked", function(value, element) {
return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");
Y también puede anular el mensaje de una regla (es decir: Debe seleccionarse al menos 1) utilizando la sintaxis data-msg-rulename="my new message"
.
NOTA
Si utiliza el data-rule-rulename
método, deberá asegurarse de que el nombre de la regla esté en minúsculas. Esto se debe a que la función de validación jQuery se dataRules
aplica .toLowerCase()
a la comparación y la especificación HTML5 no permite mayúsculas.
Ejemplo de trabajo
$.validator.addMethod("oneormorechecked", function(value, element) {
return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");
$('.validate').validate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<form class="validate">
red<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" data-msg-oneormorechecked="Check one or more!" /><br/>
blue<input type="checkbox" name="colours[]" value="blue" /><br/>
green<input type="checkbox" name="colours[]" value="green" /><br/>
<input type="submit" value="submit"/>
</form>