validacion - validar formulario jquery bootstrap
Plugin de validación de jQuery: agregar reglas que se aplican a campos múltiples (3)
Estoy usando el complemento jQuery Validation :
Tengo varios campos en una gran forma a los que quiero aplicar las mismas reglas. He simplificado el código para este ejemplo. Este código no funciona, pero quiero hacer algo como esto. La segunda regla debe aplicarse a first_name y last_name . Quiero encapsular todas las reglas aquí en esta función y no editar las listas de clase de algunos de los elementos del formulario para agregar una clase requerida o lo que sea.
(De nuevo, tengo varios grupos diferentes de campos de formulario con diferentes requisitos que quiero agrupar. Solo puse required: true en ese elemento para simplificar)
$(''#affiliate_signup'').validate(
{
rules:
{
email: {
required: true,
email: true
},
first_name,last_name: {
required: true
},
password: {
required: true,
minlength: 4
}
}
});
Gracias por adelantado.
A los fines de mi ejemplo, este es el código base de partida:
HTML:
<input type="text" name="field_1" />
<input type="text" name="field_2" />
<input type="text" name="field_3" />
jQuery:
$(''#myForm'').validate({
rules: {
field_1: {
required: true,
number: true
},
field_2: {
required: true,
number: true
},
field_3: {
required: true,
number: true
}
}
});
Opción 1a) Puede extraer los grupos de reglas y combinarlas en variables comunes.
var ruleSet1 = {
required: true,
number: true
};
$(''#myForm'').validate({
rules: {
field_1: ruleSet1,
field_2: ruleSet1,
field_3: ruleSet1
}
});
Opción 1b) Relacionado con 1a anterior pero dependiendo de su nivel de complejidad, puede separar las reglas que son comunes a ciertos grupos y usar .extend() para recombinarlas de infinitas maneras.
var ruleSet_default = {
required: true,
number: true
};
var ruleSet1 = {
max: 99
};
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1
var ruleSet2 = {
min: 3
};
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2
$(''#myForm'').validate({
rules: {
field_1: ruleSet2,
field_2: ruleSet_default,
field_3: ruleSet1
}
});
Resultado final:
field_1será un número requerido no menos de 3.field_2solo será un número requerido.field_3será un número requerido no mayor que 99.
Opción 2a) Puede asignar clases a sus campos según las reglas comunes deseadas y luego asignar esas reglas a las clases. Usando el método addClassRules estamos tomando reglas compuestas y convirtiéndolas en un nombre de clase.
HTML:
<input type="text" name="field_1" class="num" />
<input type="text" name="field_2" class="num" />
<input type="text" name="field_3" class="num" />
jQuery:
$(''#myform'').validate({ // initialize the plugin
// other options
});
$.validator.addClassRules({
num: {
required: true,
number: true
}
});
Opción 2b) La diferencia principal de la opción 2a es que puede usar esto para asignar reglas a los elementos de entrada creados dinámicamente llamando al método de rules(''add'') inmediatamente después de crearlos. Puede usar la class como selector, pero no es obligatorio. Como puede ver a continuación, hemos utilizado un selector de comodines en lugar de class .
El método .rules() se debe invocar en cualquier momento después de invocar .validate() .
jQuery:
$(''#myForm'').validate({
// your other plugin options
});
$(''[name*="field"]'').each(function() {
$(this).rules(''add'', {
required: true,
number: true
});
});
Documentación:
Si te entendí bien, quieres aplicar muchas reglas a muchos campos, que pueden diferir en algunas reglas, pero eres demasiado flojo para repetirte con las mismas reglas en otros campos. Sin embargo, con jQuery validate es posible tener más de una regla en un campo de entrada. Solo usa la notación de matriz aquí.
Para lograr su caso de uso, solo agregue atributos de data a cada campo de entrada con las reglas que desea aplicar a él. En el mejor de los casos, use un formato json codificado en la url, para que solo necesite un atributo de data por cada campo de entrada. P.ej.:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>validate test</title>
</head>
<body>
<form id="myForm" name="myForm" method="post" action="www.example.com/my-url">
<input type="text" name="txt1" data-rules="%7B%22required%22%3Atrue%2C%22minlength%22%3A2%2C%22maxlength%22%3A10%7D" />
<input type="text" name="txt2" data-rules="%7B%22required%22%3Atrue%2C%22minlength%22%3A2%2C%22maxlength%22%3A10%7D" />
<input type="number" name="number1" data-rules="%7B%22required%22%3Atrue%2C%22number%22%3Atrue%2C%22min%22%3A1%2C%22max%22%3A999%7D" />
<input type="email" name="email1" data-rules="%7B%22required%22%3Atrue%2C%22email%22%3Atrue%2C%22minlength%22%3A20%7D" />
<input type="email" name="email2" data-rules="%7B%22required%22%3Atrue%2C%22email%22%3Atrue%2C%22minlength%22%3A20%7D" />
</form>
<script type="text/javascript">
var $field = null;
var rules = {};
$(''#myForm input, #myForm textarea'').each(function (index, field) {
$field = $(field);
rules[$field.attr(''name'')] = JSON.parse(decodeURIComponent($field.attr(''data-rules'')));
});
$(''#myForm'').validate(rules);
</script>
</body>
</html>
La tecnología básica detrás de eso es simple:
- Crea tus campos con el atributo `data-``.
- Pasa el cursor por cada campo de entrada para tomar las reglas que quieras aplicar en él.
- Aplicar sus reglas recopiladas al elemento de formulario
También podría usar grupos de entrada con los mismos validadores de esa manera, por ejemplo, utilizando clases para él y variables de JavaScript predefinidas con el objeto de reglas. Creo que tienes la idea de cómo hacerte perezoso de una manera elegante ;-)
Puede usar la sintaxis ''getter'' de esta manera:
{
rules:
{
email: {
required: true,
email: true
},
first_name: {
required: true
},
get last_name() {return this.first_name},
password: {
required: true,
minlength: 4
}
}
}