jQuery Validación Plugin - añadir reglas que se aplican a múltiples campos

Question

que estoy usando el plugin jQuery Validation:

Tengo varios campos en una forma grande que desea aplicar las mismas reglas a. He simplificado el código para este ejemplo. Este código no funciona, pero quiero hacer algo como esto. La segunda regla debe aplicarse tanto a first_name como a 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.

(Una vez más, tienen varios grupos diferentes de campos de formulario con diferentes requisitos que quiero grupo. Yo sólo 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 de antemano.

Answer 1

Para los propósitos de mi ejemplo, este es el código de inicio de base:

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 
     } 
    } 
}); 

http://jsfiddle.net/9W3F7

---

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 
    } 
}); 

http://jsfiddle.net/9W3F7/1

---

Opción 1b) En relación con 1a anterior pero dependiendo de su nivel de complejidad, se pueden separar las reglas que son comunes a ciertos grupos y utilizar .extend() para recombinar en un número infinito de formas.

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_1 será un número requerido no menos de 3.

• field_2 sólo será un número requerido.

• field_3 habrá un número requerido no mayor de 99.

http://jsfiddle.net/9W3F7/2

---

Opción 2a) Puede asignar clases a sus campos sobre la base de normas comunes deseados y luego asigna 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 
    } 
}); 

http://jsfiddle.net/9W3F7/4/

---

Opción 2b) La principal diferencia con respecto a la opción 2a es que se puede usar esto para asignar reglas para crear elementos de entrada creados dinámicamente llamando rules('add') método inmediatamente después de crearlos. Usted podría use 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()necesidad ser llamado en cualquier momento después de invocando .validate().

jQuery:

$('#myForm').validate({ 
    // your other plugin options 
}); 

$('[name*="field"]').each(function() { 
    $(this).rules('add', { 
     required: true, 
     number: true 
    }); 
}); 

http://jsfiddle.net/9W3F7/5/

---

Documentación:

• rules('add') method

• addClassRules method

Answer 2

Puede utilizar la sintaxis 'captador' 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 
     } 
     } 
    }