jQuery Validation è un plugin di jQuery che permette in modo facile ed intuitivo di effettuare validazione client-side. Tempo fa scrissi un articolo di infarinatura; ho parlato del progetto ed elencato metodi standard per effettuare validazioni non molto complesse.
Con il passare del tempo ho raccolto una serie di trucchi e suggerimenti per effettuare validazioni più “estreme”; come di consueto le lascio a disposizione:
Verificare due campi uguali
Esempio più comune: confrontare l’uguaglianza tra due campi email o password:
jQuery('#myform').validate({
rules: {
email_field:
{
required: true, equalTo: "#email_field_confirm"
}
}
});
Gestire le dipendenze
Effettuare una validazione di un campo solo se non fleggato un suo discendente.
jQuery(function(){
jQuery('#myform').validate({
other_field: {
required: {
depends: function(element)
{
return (jQuery('input[name="other_flag"]').attr('checked') != undefined);
}
}
}
});
});
Messaggi custom
Messaggi personalizzati di errore senza bisogno di modificare il javascript sorgente.
jQuery('#myform').validate({
messages: {
field_name: 'Please fill ' + field_name;
}
});
jQuery(".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"
}
}
})
Ignorare elementi
Se utilizzo una validazione standard dell’intero form posso escludere tramite dei campi attraverso l’attributo class o id.
jQuery("#myform").validate({
ignore: ".ignore"
})
Callback
Esegue funzioni di callback a seconda dell’handler in entrata, nell’esempio utilizzo submitHandler per inviare un alert al click del tasto “submit”.
jQuery("#myform").validate({
meta: "validate",
submitHandler: function() { alert("Submitted!") }
})
Posizione dei messaggi di errore
Di default i messaggi di errore compaiono accanto ai campi, attraverso un wrapper ed un contenitore vuoto possiamo definire una diversa posizione per la comparsa degli errori.
jQuery("#myform").validate({
errorLabelContainer: "#messageBox",
wrapper: "li",
submitHandler: function() { alert("Submitted!") }
})
Oppure inserire più messaggi:
There are errors in your form, see details above!
jQuery("#myform").validate({
errorContainer: "#messageBox1, #messageBox2",
errorLabelContainer: "#messageBox1 ul",
wrapper: "li", debug:true,
submitHandler: function() { alert("Submitted!") }
})
