Validare form con LiveValidation

Se si dà un'occhiata alle tag clouds dei siti che raccolgono script e widget di ultima generazione, si nota subito che, per quanto attiene agli elementi di interfaccia, il tag più usato è quasi sempre 'Forms'. Nel contesto di questa categoria si contano diverse librerie che facilitano enormemente allo sviluppatore il compito di implementare la validazione client-side dei moduli. Molto spesso, poi, queste librerie aggiungono alla pura e semplice validazione dei dati la possibilità di offrire all'utente dei messaggi di aiuto o degli avvisi che lo guidino nella compilazione.

Ci occupiamo in questo articolo di LiveValidation, una delle più apprezzate tra le soluzioni per la validazione di form emerse negli ultimi mesi. In questa prima parte realizzeremo alcuni semplici esempi di base per prendere confidenza con la sintassi e con le opzioni principali. Nella seconda analizzeremo in dettaglio le opzioni più avanzate.

Scaricare la libreria

Il sito ufficiale della libreria presenta, oltre ad una ricca documentazione e a diversi esempi, una pagina ad hoc per il download. Si può scegliere tra quattro opzioni. Si può scaricare una versione standalone o quella basata su Prototype. E per ciascuna è disponibile una versione compressa, con cui il peso della libreria scende da 30kb a 10kb.

Nel pacchetto zip allegato a questo articolo troverete la versione standalone completa, cosa che permetterà a chi lo voglia di studiare il codice per apportare eventualmente modifiche adatte ai propri scopi.

Come si usa

Insieme alla libreria e ai file degli esempi troverete nello zip un foglio di stile CSS: validation.css. Ne parleremo più avanti. Per ora basti sapere che contiene alcune semplici regole per la formattazione dei messaggi di avviso e dei campi del form che vengono validati. Nel preparare il primo esempio, abbiamo inserito questo foglio di stile e la libreria nella sezione head della pagina, in questo modo:

Nella parte HTML è presente un semplice campo di testo:

Occhio all'id. Tutti i campi da validare con LiveValidation devono possedere un identificativo univoco.

Subito dopo troviamo il codice Javascript che richiama la funzione di validazione della libreria:

Per prima cosa si crea un nuovo oggetto LiveValidation che ha come argomento l'id dell'input visto in precedenza. Si assegna il tutto alla variabile campo.

Andiamo poi ad aggiungere il richiamo alla funzione di validazione, usando uno dei tanti metodi disponibili: Presence. Esso effettua il tipo di validazione di base, ovvero la verifica sull'avvenuta compilazione del campo.

Provando l'esempio, spostate il focus sul campo posizionandovi con il cursore al suo interno; poi, senza inserire nulla, cliccate con il mouse in un punto qualsiasi della pagina: vedrete apparire l'avviso "Can't be empty". Provate quindi a scrivere qualcosa nel campo. Basterà una lettera per veder comparire il messaggio "Thankyou!".

La presenza di questi avvisi in inglese non è il massimo se ci si rivolge ad un pubblico italiano! E a prescindere da questo fatto, ognuno vorrebbe poter personalizzare come meglio crede il testo dei messaggi.

Gli avvisi impostati di default sono incorporati nel codice della libreria. Ecco un estratto (righe 420-427):

Liberissimi di andare a modificarli, ovviamente. Ma abbiamo a disposizione una via più semplice.

LiveValidation, infatti, consente di definire tutta una serie di parametri da passare alla funzione di validazione, tra cui dei messaggi di validità e non validità che vanno a sovrascrivere quelli di default. È quanto abbiamo fatto nel secondo esempio

usando i parametri opzionali validMessage e failureMessage.

Nel terzo esempio sfruttiamo il metodo Format. Consente di validare il contenuto inserito nel campo rispetto ad un'espressione regolare definita come parametro:

Il campo sarà validato solo se al suo interno viene inserita la stringa 'validare' (in base all'espressione regolare definita, quindi, anche 'invalidare' è un valore accettato).

Combinare diversi tipi di validazione su un solo campo è semplicissimo. Lo abbiamo fatto nell'esempio 4. Verifichiamo prima che il campo non sia vuoto, poi che al suo interno sia presente la stringa 'validare':

In una libreria così completa è normale trovare un metodo per la validazione rispetto alla presenza o meno di valori numerici. Si sfrutta in questo caso il metodo Numericality, come nell'esempio 5:

Si noti che in questo caso, per impostare il messaggio di non validità, il parametro da usare non è failureMessage, ma notANumberMessage.

La documentazione della libreria è il luogo migliore dove imparare tutte le opzioni che si possono impostare per la validazione di numeri. Nell'ultimo esempio abbiamo sfruttato il parametro is, con cui si può impostare un valore numerico univoco da inserire nel campo:

Personalizzare gli avvisi

Come abbiamo accennato, il foglio di stile validation.css ci consente di personalizzare a piacere lo stile e la formattazione degli avvisi. Contiene appena cinque regole, con la definizione di una serie di classi che si applicano ai messaggi di avviso e ai campi (vi sarete infatti accorti, testando gli esempi su Firefox, che gli avvisi testuali sono accompagnati dal cambiamento del colore del bordo dei campi). Per comodità abbiamo aggiunto dei commenti in italiano prima di ciascuna regola per consentirvi di sapere cosa si va a definire e modificare con ciascuna. Ecco il codice completo del CSS:

Altri tipi di validazione

Dopo aver visto nella prima parte i tipi fondamentali di validazione e il modo con cui personalizzare gli stili degli avvisi, passiamo ad analizzare gli altri tipi di validazione offerti da LiveValidation.

Lunghezza

Attraverso il metodo Lenght è possibile validare un campo rispetto alla lunghezza, ovvero rispetto al numero dei caratteri inseriti. È possibile intanto usare il parametro is per impostare una lunghezza esatta, come nell'esempio 7:

Ma si possono usare anche i parametri minimum e maximum. Con il primo si imposta un numero minimo di caratteri (esempio 8):

Lo script segnalerà in questo caso un errore se si inseriscono meno di sei caratteri.

Con maximum, invece, l'errore verrà segnalato se si supera una soglia definita di caratteri (esempio 9):

Inclusione ed esclusione

È anche possibile impostare un set di valori rispetto al quale verificare la presenza o l'assenza nel contenuto inserito nel campo.

Attraverso il metodo Inclusion si può verificare se l'utente ha inserito o meno un valore specifico e predeterminato. Se tale valore non viene inserito, lo script segnalerà l'errore. Nell'esempio 10 il campo sarà validato solo se contiene i valori 'css' o 'javascript':

Al contrario, usando il metodo Exclusion, non si valida un campo in cui siano stati inseriti specifici valori definiti nella dichiarazione (esempio 11):

Controllo sui checkbox

Un metodo speciale di LiveValidation si applica ai checkbox. Si tratta di Acceptance. In pratica, consente di verificare che un checkbox sia stato o meno spuntato dall'utente (esempio 12):

Conferma

Non poteva mancare uno dei più classici metodi di validazione, quello che consente di verificare la password inserita dall'utente con un campo di conferma (esempio 13):

Nella parte HTML andranno intanto impostati due input di tipo password, con id diversi. Nella parte Javascript, dopo aver stabilito che la validazione avverrà sull'input con id="campo" (il secondo), si userà il parametro match per definire rispetto a quale input deve avvenire il confronto (nel nostro caso è l'input con id="password").

E-mail

Chiudiamo la rassegna (parziale, perché non comprende ovviamente tutte le opzioni che è possibile impostare) con la validazione degli indirizzi e-mail (esempio 14), davvero semplice da definire:

Lo script controlla che la forma dell'indirizzo sia del tipo nome@dominio.it (o .com, .net, etc).

L'opzione onlyOnBlur

In tutti gli esempi visti, abbiamo voluto lasciare in evidenza la funzionalità di LiveValidation che per certi versi viene promossa nello stesso nome della libreria (Live). Il fatto, cioè, che la validazione avviene mentre l'utente agisce sul campo da validare (lo slogan della libreria è Validation as you type).

Una soluzione del genere potrebbe essere non gradita, allo sviluppatore ma anche all'utente. Per fortuna LiveValidation mette a disposizione un parametro, onlyOnBlur, che consente di effettuare la validazione solo quando l'input perde il focus.

Riprendiamo per un attimo il primo esempio visto nell'articolo:

Le impostazioni sono quelle di base e di default, per cui appena si inserisce un carattere (segno che il campo è stato compilato), scatta la validazione e appare il messaggio di feedback.

Abbiamo creato una versione alternativa di questo esempio a cui abbiamo aggiunto il parametro onlyOnBlur (per comodità e per apprezzare al meglio la funzionalità è stato aggiunto un secondo input, provate a compilare il primo e poi a spostarvi nel secondo, anche con l'uso del tasto TAB):

La differenza di comportamento è evidente, a voi la scelta.

Uso su form completi

Non poteva mancare a conclusione dell'articolo un esempio su un form completo (esempio 15). Partiamo dalla parte HTML:

Niente di trascendentale. Tre campi, di cui due obbligatori e uno opzionale.

Ecco la parte Javascript:

Chiariamo subito che la parte evidenziata non fa parte della validazione vera e propria, ma serve solo a dare un alert di validità del form per il test.

La parte a cui prestare attenzione è il parametro onlyOnSubmit: true definito per ciascun oggetto LiveValidation (i tre input per essere più chiari). Impostando a true tale parametro facciamo sì che la validazione avvenga solo quando il form viene inviato cliccando sul pulsante di submit. La prova dal vivo dell'esempio vale più di mille parole.

Non usando questo parametro, la validazione (e la visualizzazione dei messaggi di feedback) avviene mentre l'utente si sposta tra i vari campi e li compila (o non compila). Ecco il codice Javascript dell'ultimo esempio:

Vi segnalo per finire che anche tutti gli esempi visti nella seconda parte sono disponibili per il download.