jQuery validation tricks

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!") }
})