JavaScript  »  Articoli  »  JQuery 

JQuery Validation Plugin

Quest'ultimo plugin si differenzia dai precedenti perché non consente di creare widget grafici (come appunto tab e tree) ma permette di implementare facilmente una delle componenti più scomode e spesso mal organizzate di una applicazione web: la validazione dei dati inseriti dall'utente.

Per meglio comprendere il meccanismo di funzionamento è bene definire due concetti chiave: metodo di validazione e regola di validazione.

Un metodo di validazione non è nient'altro che una funzione che implementa la logica per determinare la validità di un testo. Tutti i metodi di validazione devono ritornare un booleano. Il plugin presenta alcuni metodi di validazione standard (lunghezza testo, email, url, data, numero e altri). La creazione di nuovi metodi di validazione avviene tramite il metodo addMethod che riceve come parametri il nome del metodo, la funzione da eseguire e un messaggio di errore da visualizzare.

Una regola di validazione è una sorta di relazione tra un campo di input HTML (di qualsiasi tipo) con uno o più metodi di validazione. Le regole di validazione vengono comunicate utilizzando l'attributo class presente nel DOM utilizzando lo spazio tra ciascun metodo invocato.

A differenza dei precedenti plugin, quest'ultimo presenta delle dipendenze. Significa che per poter usufruire in pieno delle sue funzionalità è necessario disporre anche di ulteriori plugin realizzati da terze parti. I plugin necessari sono:

• delegate (obbligatorio);
• metadata (obbligatorio solo se si vogliono impostare regole di validazione tramite l'attributo class) ;
• form (obbligatorio per inviare i dati tramite richieste asincrone ed Ajax - componente non presa in considerazione in questa introduzione al plugin).

Guardiamo subito un esempio di form che imposta le regole tramite l'attributo class degli input:

<form action="#" method="post" id="form2validate">
  <p>
    <label for="username">Username:</label>
    <input type="text" name="username" class="required {minlength:2}"/>
  </p>
  <p>
    <label for="password">Password:</label>
    <input type="text" name="password"/>
  </p>
  <p>
    <label for="password_confirm">Conferma la Password:</label>
    <input type="text" name="password_confirm"/>
  </p>          
  <p>
    <label for="birthdate">Data di nascita</label>
    <input type="text" name="birthdate"/>
  </p>     
  <p>
    <label for="email">Indirizzo email</label>
    <input type="text" name="email" class="email required"/>
  </p>    
  <p>
    <label for="privacy">Accetto</label>
    <input type="checkbox" name="privacy" class="required"/>
  </p> 
  <p>
    <input type="submit"/>
  </p>          
</form>

Come possiamo vedere ci sono due tipologie di metodi di validazione: quelli che richiedono dei parametri (per esempio maxlength) e quelli che non ne richiedono (per esempio required).

Per il secondo caso basterà citare come class il nome del metodo mentre per il primo tipo bisognerà utilizzare la sintassi JSON metodo:parametro. Ecco qua il primo esempio dal vivo.

I messaggi di errore verranno di default appesi dopo l'input all'interno di un tag label con classe error. Questo è il comportamenti di default, ma si può semplicemente modificare per esempio creando un container HTML dove andremo a mettere tutti i nostri errori - ma lo vedremo successivamente.

Ovviamente i metodi di validazione non saranno mai sufficienti per implementare un controllo che sia davvero efficace e personalizzato. La soluzione migliore risulta quindi quella di creare un nostro metodo di validazione da richiamare poi nella class di un input. Creiamo per esempio un metodo che controlla che il campo inserito sia correttamente un codice fiscale utilizzando una regex. Basterà quindi chiamare il metodo statico addMethod:

jQuery.validator.addMethod("codfiscale", function(value) { 
  // espressione migliorabile... ma sufficiente per il nostro esempio
  var regex = /[A-Z]{6}[\d]{2}[A-Z][\d]{2}[A-Z][\d]{3}[A-Z]/;   
  return value. match(regex);  
}, "Please insert a valid italian identification number");

E poi richiamare il metodo nell'HTML:

<p>
  <label for="id">Codice fiscale:</label>
  <input type="text" name="id" class="codfiscale"/>
</p>

Se volessimo invece inserire un metodo di validazione che si aspetta valori in entrata basterà aggiungere alcuni parametri alla nostra callback da passare a addMethod:

jQuery.validator.addMethod("radice", function(value, element, params) { 
  return this.optional(element) || value * value == params; 
}, "Please enter the correct radix");

Da notare la presenza del doppio controllo utilizzando this.optional(element). Questo permette di impostare il campo come opzionale: può essere quindi vuoto. Ovviamente in questo modo è possibile creare metodi di validazione annidati tra di loro. Ecco il secondo esempio funzionante.

Qualsiasi altra personalizzazione del plugin (come per esempio la modifica dei messaggi di errore standard, delle classi associate alla label di errore o eventuali callback per gli eventi esposti dal plugin) può avvenire tramite il passaggio di un parametro di opzioni al metodo validate. Non mi soffermo su questi aspetti che riguardano un utilizzo più approfondito del plugin; per maggiori informazioni rimando come al solito alla documentazione ufficiale presente a questo indirizzo: http://docs.jquery.com/Plugins/Validation.

Termina qui questa carrellata su alcuni dei plugin più interessanti per jQuery. Nel prossimo articolo vedremo come creare il nostro primo plugin per jQuery.

Altri articoli

Altre guide

Altre newsletter