jQuery validation tricks

jQuery validation tricks

1487
3
CONDIVIDI

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"
      }
   }
});
</script>

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

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.

<ul id="messageBox"></ul>
jQuery("#myform").validate({
   errorLabelContainer: "#messageBox",
   wrapper: "li",
   submitHandler: function() { alert("Submitted!") }
})

Oppure inserire più messaggi:

<ul id="messageBox"></ul>
 
<div id="messageBox2"> 
  <h3>There are errors in your form, see details above!</h3> 
</div>
jQuery("#myform").validate({
   errorContainer: "#messageBox1, #messageBox2",
   errorLabelContainer: "#messageBox1 ul",
   wrapper: "li", debug:true,
   submitHandler: function() { alert("Submitted!") }
})
  • Franklin

    Salvo nei preferiti. Grazie!

  • Ciao,
    hai esposto chiaramente l’utilizzo. Se volessi cambiare solamente il colore del bordo dell’input field errato, ignorando messaggi testuali, avresti qualche idea?

    Per ora ho creato una classe css di errore che richiamo con:
    errorClass: “form_error”.

    • Sato

      Modiificare il bordo da css?