Come possiamo specificare le regole per il plugin di validazione jquery per classe?

Question

Il jQuery Validation plugin funziona alla grande ed è molto facile da usare:

$(".selector").validate({ 
}) 

Proprio impostando classi CSS come "e-mail necessaria", viene visualizzato il messaggio predefinito.

Tuttavia, ho bisogno di personalizzare i messaggi. La documentazione dice che è possibile specificare le regole utilizzando una coppia chiave-valore per gli elementi ed i loro messaggi corrispondenti:

$(".selector").validate({ 
    rules: { 
    name: "required", 
    email: { 
     required: true, 
     email: true 
    } 
    }, 
    messages: { 
    name: "Please specify your name", 
    email: { 
     required: "We need your email address to contact you", 
     email: "Your email address must be in the format of name@domain.com" 
    } 
    } 
}) 

Ma, non è pratico per specificare una regola per ogni elemento del modulo, in particolare i controlli server-generati in ASP. NETTO. È possibile specificare regole applicabili a TUTTI gli elementi? O posso usare un selettore di classe in qualche modo?

Ho provato quanto segue, ma non ha funzionato:

$("#frmMyForm").validate 
({ 
    rules: 
    { 
     $(".required email"): 
     { 
      required: true, 
      email: true 
     } 
    }, 
    messages: 
    { 
     $(".required email"): 
     { 
      required: "Please enter your email address", 
      email: "Your email address must be in the format of name@domain.com" 
     } 
    } 
}); 

che sembrava essere un errore di sintassi - il plugin non ha fatto nulla. Poi ho provato:

$("#frmMyForm").validate 
({ 
    rules: 
    { 
     ".required email": 
     { 
      required: true, 
      email: true 
     } 
    }, 
    messages: 
    { 
     ".required email": 
     { 
      required: "Please enter your email address", 
      email: "Your email address must be in the format of name@domain.com" 
     } 
    } 
}); 

Questo non ha avuto alcun errore di sintassi - il plugin ha funzionato, ma ignorato le regole/messaggi personalizzati. Qualcuno qui ha usato il plugin jQuery Validation? In tal caso, come hai applicato regole/messaggi personalizzati a più elementi?

Grazie!

Answer 1

Ai fini del mio esempio, questo è il codice base di partenza:

HTML:

<input type="text" name="field_1" /> 
<input type="text" name="field_2" /> 
<input type="text" name="field_3" /> 

JS:

$('#myForm').validate({ 
    rules: { 
     field_1: { 
      required: true, 
      number: true 
     }, 
     field_2: { 
      required: true, 
      number: true 
     }, 
     field_3: { 
      required: true, 
      number: true 
     } 
    } 
}); 

DEMO: http://jsfiddle.net/rq5ra/

---

NOTA: Non importa quale tecnica di seguito viene utilizzata per assegnare le regole, è un requisito assoluto del plugin che ogni elemento ha un unico attributo name.

---

Opzione 1 bis) È possibile assegnare le classi per i campi sulla base di regole comuni desiderati e quindi assegnare tali norme alle classi. Puoi anche assegnare messaggi personalizzati.

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" /> 

Il .rules() metodo must essere chiamato dopo invocando .validate()

JS:

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

$('.num').each(function() { 
    $(this).rules('add', { 
     required: true, 
     number: true, 
     messages: { 
      required: "your custom message", 
      number: "your custom message" 
     } 
    }); 
}); 

DEMO: http://jsfiddle.net/rq5ra/1/

Opzione 1b) Idem come sopra, ma invece di utilizzare un class, che corrisponde a una parte comune dell'attributo name:

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

DEMO: http://jsfiddle.net/rq5ra/6/

---

Opzione 2a) È possibile estrarre i gruppi di regole e combinarli in variabili comuni.

var ruleSet1 = { 
     required: true, 
     number: true 
    }; 

$('#myForm').validate({ 
    rules: { 
     field_1: ruleSet1, 
     field_2: ruleSet1, 
     field_3: ruleSet1 
    } 
}); 

DEMO: http://jsfiddle.net/rq5ra/4/

---

Opzione 2b) Relativi a 2a sopra, ma a seconda del livello di complessità, in grado di separare le regole che sono comuni a certi gruppi e utilizzano .extend() ricombinarli in un numero infinito di modi.

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 

var ruleSet3 = { }; 
$.extend(ruleSet3, ruleSet1, ruleSet2); // combines sets 2 & 1 into set 3. Defaults are included since they were already combined into sets 1 & 2 previously. 

$('#myForm').validate({ 
    rules: { 
     field_1: ruleSet2, 
     field_2: ruleSet_default, 
     field_3: ruleSet1, 
     field_4: ruleSet3 
    } 
}); 

Risultato finale:

• field_1 sarà un numero non inferiore a 3.
• field_2 sarà solo un numero richiesto.
• field_3 sarà un numero non superiore a 99.
• field_4 sarà un numero compreso tra 3 e 99.

DEMO: http://jsfiddle.net/rq5ra/5/

Answer 2

Si potrebbe usare addClassRules, come:

 

jQuery.validator.addClassRules("name", { 
    required: true, 
    minlength: 2 
}); 
 

Answer 3

jQuery.validator.addClassRules(); sarà collegare la convalida in classe , ma non c'è un'opzione per i messaggi, utilizzerà i messaggi di errore generali.

Se si desidera che lavorare allora, si dovrebbe refactoring le regole come questo

$.validator.addMethod(
    "newEmail", //name of a virtual validator 
    $.validator.methods.email, //use the actual email validator 
    "Random message of email" 
); 

//Now you can use the addClassRules and give a custom error message as well. 
$.validator.addClassRules(
    "email", //your class name 
    { newEmail: true } 
); 

Answer 4

Prima di questo è necessario includere file di query

$("#myform_name").validate({ 
    onfocusout: function(element) { $(element).valid(); } , 
    rules:{ 
     myfield_name: { 
      required:true 
     }, 
     onkeyup: false, 
     messages: { 
      myoffer: "May not be empty" 
     } 
    } 
}); 

Answer 5

approccio alternativo:

$.validator.addMethod("cMaxlength", function(value, element, param) { 
 
\t \t 
 
\t return $.validator.methods.maxlength.call(this, value, element, param[1]); 
 

 
}, '{0}');

Gist: https://gist.github.com/uhtred/833f3b957d61e94fbff6

$.validator.addClassRules({ 
 
    'credit-card': { 
 
    \t cMaxlength: [ 'Invalid number.', 19 ] 
 
    } 
 
});

Answer 6

$.validator.addMethod("cMaxlength", function(value, element, param) { 
 
\t \t 
 
\t return $.validator.methods.maxlength.call(this, value, element, param[1]); 
 

 
}, '{0}');

Answer 7

ho costruito alla risposta di Starx per creare un ripetibile facile da usare funzione che utilizza i metodi predefiniti e crea nuovi messaggi di errore per classi specifiche. considerando il fatto che la tua classe specifica verrà utilizzata solo per sovrascrivere il messaggio una volta che non dovresti avere conflitti che riutilizzano questo per molti nomi di classi diversi utilizzando qualsiasi metodo esistente.

var CreateValidation = function(className, customMessage, validationMethod){ 
    var objectString = '{"'+ className +'": true}', 
    validator = $.validator; 

    validator.addMethod(
    className, 
    validator.methods[validationMethod], 
    customMessage 
); 
    validator.addClassRules(
    className, 
    JSON.parse(objectString) 
); 
}; 

Utilizzo Esempio di classe convalida essere "validazione-class-cognome":

CreateValidation('validation-class-firstname', 'Please enter first name', 'required'); 

Answer 8

È possibile aggiungere regole di classe con il metodo addClassRules:

Ad es

$.validator.addClassRules("your-class", { 
    required: true, 
    minlength: 2 
}); 

https://jqueryvalidation.org/jQuery.validator.addClassRules/