INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

jQuery Validation: validazione di un form con jQuery

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Il plug-in jQuery Validation consente di validare un form attraverso una nutrita schiera di funzioni di controllo, gestibili direttamente attraverso jQuery, by-passando completamente le classiche istruzioni condizionali e l'utilizzo delle funzioni per la gestione delle stringhe.

In questo articolo esamineremo tutti i sistemi di controllo che il jQuery Validate mette a disposizione degli sviluppatori, capiremo la sintassi per il suo impiego e faremo un esempio pratico.

Download del plug-in jQuery Validation

Il download del plug-in jQuery Validation è disponibile all'indirizzo:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Cliccando su "Download" si scaricherà il file jquery.validate.zip che contiene, tra l'altro, degli esempi di utilizzo del plug-in stesso.

Ci interessa estrarre dall'archivio compresso il file jquery.validate.js che includeremo nella pagina in cui abbiamo il form da validare, subito dopo l'inclusione di jQuery:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
A questo punto sono a nostra disposizione tutte le funzionalità che jQuery e jQuery Validation ci offrono per la validazione dei form.

Proprietà di controllo di jQuery Validation e sintassi

jQuery Validation dispone di numerose proprietà di controllo che consentono di impostare condizioni più o meno complesse: dalla semplice specifica di un campo obbligatorio al confronto tra due stringhe, dalla verifica di un valore numerico alle espressioni regolari, e cosi via.

Segue l'elenco in ordine alfabetico delle proprietù di jQuery Validation.
  • accept - verifica che in un campo in cui si inserisce il nome ed il percorso di un file, l'stensione di un file sia presente tra quelle specificate, separandole col carattere pipe (|).
  • creditcard - espressione regolare per il controllo di un numero di carta di credito.
  • date - espressione per la verifica di una stringa in formato data.
  • dateDE - verifica che una data sia in formato coerente con la data tedesca (il plug-in "proviene" dalla Germania).
  • dateISO - verifica che il formato di una data rispetti gli standard ISO.
  • digits - verifica che il contenuto di un campo sia un numero intero.
  • email - espressione regolare per il controllo di un indirizzo email.
  • equalTo - verifica che il valore di un campo sia uguale al valore specificato in un altro campo.
  • max - verifica che un valore numerico immesso in un campo non sia maggiore di quello specificato.
  • maxLength - accetta un valore numerico che specifica il massimo numero di caratteri che devono essere inseriti.
  • min - verifica che un valore numerico immesso in un campo non sia minore di quello specificato.
  • minLength - accetta un valore numerico che specifica il minimo numero di caratteri che devono essere inseriti.
  • number - booleano, verifica che il contenuto di un campo sia numerico; accetta il punto (.) come separatore dei decimali.
  • numberDE - booleano, verifica che il contenuto di un campo sia numerico; accetta la virgola (,) come separatore dei decimali.
  • range - controlla che il valore .
  • rangeLength - verifica che il numero di caratteri inseriti in un campo siano compresi tra quello minimo e quello massimo specificato.
  • remote - accetta la URL di uno script lato server esterno (ASP, PHP etc...) che effettui il controllo.
  • required - booleano, accetta "true" o "false" a seconda che il campo sia richiesto o meno.
  • url - espressione regolare per il controllo di una URL.
La sintassi di base per l'utilizzo di jQuery Validation prevede l'impiego del comando rules in cui vengono elencate, campo per campo, tutte le regole ed i messaggi di errore verranno inseriti nel comando messages in cui elencheremo nuovamente i nomi dei campi ed in corrispondenza del tipo di controllo il relativo messaggio di errore, qualora il controllo stesso non sia stato soddisfatto.

Vediamo un esempio puramente sintattico:
rules:
{
    campo_uno: "nome_singolo_controllo",
    campo_due:
    {
        primo_controllo: valore,
        secondo_controllo: valore
    }
},
message:
{
    campo_uno: "Inserisci il valore del campo 1",
    campo_due:
    {
        primo_controllo: "Rispetta il primo controllo",
        secondo_controllo: "Rispetta il secondo controllo"
    }
}
Separiamo quindi con una virgola i vari controlli, compreso il passaggio dal blocco delle rules al blocco dei messages, escludendo l'utilizzo della virgola solo all'interno delle regole contenute tra parentesi graffe e solo per l'ultima regola.

Notiamo inoltre che un controllo fatto da una sola regola può essere scritto sulla stessa riga, mettendo il nome del controllo stesso tra virgolette, mentre tra i blocchi di parentesi graffe i controlli vengono valorizzati utilizzando i due punti (:) come operatore di assegnazione.

Il modulo HTML

Possiamo notare che il codice HTML non contiene alcun elemento di richiamo al Javascript, dato che jQuery Validation non fa altro che reperire l'ID del form da controllare (inibendo il "submit" finchè le condizioni non sono state soddisfatte) e gli ID dei vari campi da controllare, al fianco dei quali farà comparire i vari messaggi di errore se le condizioni non vengono soddisfatte.

Vediamo quindi il codice HTML:
<form id="modulo" method="post" action="script.asp">
<div>
    <span>Nome</span><br>
    <input type="text" id="nome" name="nome">
</div>
<div>
    <span>Cognome</span><br>
    <input type="text" id="cognome" name="cognome">
</div>
<div>
    <span>Nickname</span><br>
    <input type="text" id="nickname" name="nickname">
</div>
<div>
    <span>Password</span><br>
    <input type="password" id="password" name="password">
</div>
<div>
    <span>Conferma la password</span><br>
    <input type="password" id="conferma" name="conferma">
</div>
<div>
    <span>Email</span><br>
    <input type="text" id="email" name="email">
</div>
<div>
    <span>Accetti i trrmini del servizio?</span><br>
    <input type="checkbox" id="accetto" name="accetto">
</div>
<input type="submit" value="   Invia i dati   ">
</form>
Notiamo che, nell'esempio, i dati verranno inviati attraverso un bottone di tipo "submit" ad uno script ASP attraverso il metodo post.

Per default, il form apparirà come di seguito:


Cliccando sul bottone di invio dei dati, a fianco ad ogni campo comparirà un errore se non correttamente compilati:


Man mano che i campi vengono compilati, gli errori scompariranno in automatico:


Come già detto, il submit del form avverrà in automatico una volta che tutte le condizioni vengono soddisfatte.

Il foglio di stile CSS

Al fine di dare un tocco stilistico al modulo, impieghiamo un po' di CSS:
body
{
    background: #FFFFFF;
    color: #000000;
    margin: 10px 10px 10px 10px;
}
div, input
{
    font-size: 13px;
    font-family: verdana;
}
form div
{
    color: #FF0000;
    margin: 0px 0px 10px 0px;
}
form div span
{
    color: #000000;
}
Notiamo che il colore di default che diamo ai layer contenuti all'interno del form è rosso: infatti, riguardando il codice HTML, notiamo che le etichette dei campi sono contenute in uno "span" a cui viene impostato il colore nero.

Il codice jQuery Validation per la validazione del form

Sul form sono stati impostati dei controlli basilari. Nello specifico:
  • nome - richiesta la sola compilazione.
  • cognome - richiesta la sola compilazione.
  • nickname - richiesta la sola compilazione.
  • password - richiesta la sola compilazione.
  • conferma - verifica che il valore sia uguale a quello della pasword scelta.
  • email - verifica che l'email sia nella sua espressione regolare.
  • accetto - verifica che il checkbox venga spuntato.
Vediamo il codice:
$(document).ready(function()
{
    $("#modulo").validate(
    {
        rules:
        {
            nome: "required",
            cognome: "required",
            nickname: "required",
            password: "required",
            conferma:
            {
                required: true,
                equalTo: "#password"
            },
            email:
            {
                required: true,
                email: true
            },
            accetto: "required"
        },
        messages:
        {
            nome: " Inserisci il tuo nome!",
            cognome: " Inserisci il tuo cognome!",
            nickname: " Scegli un nickname!",
            password: " Scegli una password!",
            conferma: " La conferma non corrisponde alla scelta della password!",
            email: " Inserisci un indirizzo email valido!",
            accetto: "Non hai accettato i termini del servizio!"
        }
    });
});
E' possibile implementare degli ulteriori controlli a seconda delle proprie esigenze, seguendo le regole sintattiche spiegate.

Conclusioni e spunti

Fermo restando che si tratta di un modulo di esempio e, per quanto verosimile, manca di una serie di possibili dati richiesti (data di nascita, URL di un sito e cosi via), sui campi presi in esame possiamo agire come segue:
  • nome - specificare un minimo ed un massimo di caratteri digitabili.
  • cognome - specificare un minimo ed un massimo di caratteri digitabili.
  • nickname - specificare un minimo ed un massimo di caratteri digitabili.
  • password - specificare un minimo ed un massimo di caratteri digitabili.
  • email - specificare un minimo ed un massimo di caratteri digitabili.
Al lettore il compito di implementare detti controlli.

TAGS - jquery, jquery validation

IN EVIDENZA