Il plugin Validation di jQuery

In questo articolo vi presenterò Validation, un utile plugin per jQuery che permette di validare i dati inseriti dagli utenti nei form.
Prima di tutto cerchiamo di capire bene a cosa serve questo plugin.

Sicuramente vi sarà capitato di dover creare una form che raccolga dei dati da processare lato server, magari in una registrazione utente, o più semplicemente in una pagina in cui si richiede che l'utente inserisca dei dati.
Tramite questo plugin avrete la possibilità di valutare, lato client, la correttezza dei dati inseriti, cioè se l'utente ha effettivamente inserito il tipo di dato che ci aspettiamo.
In caso di dati non corretti il plugin, ovviamente, impedisce il submit del form e, tramite un sistema di messaggi personalizzati, mostra il tipo di errore che si è verificato.

La validazione può essere fatta per ogni elemento all'interno di un form ed è effettuata mediante diversi metodi forniti dallo stesso plugin.
Non dovremo, quindi, occuparci di scrivere come verificare l'elemento, ma dovremo solo scegliere il tipo di validazione da effettuare per ciascun elemento che vogkliamo testare.
Come si può intuire il risparmio di codice scritto è notevole.

Per completezza è necessario precisare che la validazione avviene lato client e, quindi, per una maggior sicurezza (soprattutto al fine di salvaguardare l'integrità di un eventuale database preposto all'archiviazione dei dati) si dovrebbe operare lo stesso controllo anche lato server.

Passiamo ora a vedere come funziona e come si utilizza il plugin.
Il comportamento è impostato utilizzando il metodo validate(opzioni). Vediamo alcune delle opzioni più significative:

Opzione	Descrizione
rules	assegnazione della logica di validazione all'elemento della form
messages	messaggio da mostrare in caso di elemento non valido
submitHandler	callback da eseguire al submit se la form è valida.
invalidHandler	callback da eseguire al submit se la form non è valida

L'assegnamento delle opzioni avviene tramite notazione JSON, ovvero tramite la definizione di una coppia chiave:valore.
Come si può intuire, il principale elemento sono le rules, le quali permettono di assegnare all'elemento desiderato la giusta e voluta validazione.
La selezione degli elementi da validare è effettuata semplicemente in base al loro nome, è quindi importante che l'attributo "name" sia univoco all'interno del form in esame.

Vedremo ora, tramite un esempio, la semplicità ed efficienza di questo plugin.
Come prima cosa, per far funzionare il tutto, avremo bisogno di jQuery e del plugin Validation.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

L'esempio che mostrerò riguarda la registrazione di un utente al nostro sito. Il nostro form avrà i seguenti campi:

• username
• password
• conferma password
• URL sito personale
• email
• termini da accettare

Vediamo il codice HTML:

<form action="registra.php" id="form_da_validare" method="post">
<table>
<tr>
<td>Username</td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" id="password" name="password"></td>
</tr>
<tr>
<td>Conferma Password</td>
<td><input type="password" id="confirm_password" name="confirm_password"></td>
</tr>
<tr>
<td>Sito personale</td>
<td><input type="text" id="sito" name="sito"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td>Termini</td>
<td><input type="checkbox" id="termini" name="termini"></td>
</tr><br/><tr>
<td></td>
<td><input type="submit" value="Registra"></td>
</tr>
</table>
</form>

• <<
• 1
• 2
• 3
• >>