Web design elements: come validare i form con jQuery?
Nelle scorse lezioni abbiamo visto come strutturare un form, e le scelte progettuali che ci sono alla base. Un aspetto importante che abbiamo trascurato è la gestione degli errori: hai mai compilato un lungo form per scoprire solo dopo averlo inviato di aver sbagliato qualcosa? Vediamo allora come JavaScript (e in particolare jQuery) può esserci d’aiuto!
Ci siamo passati tutti: compili un form, interpreti in un modo o nell’altro il captcha di turno, accetti la licenza e invio. Cinque secondi. L’username è già occupato. Ricompilare di nuovo il form. Captcha. Licenza. Invio. Cinque secondi. Le password non coincidono. Ricompila. Captcha. Licenza. Invio.
Il problema in queste iterazioni è il ritardo che si crea tra un invio e l’altro, dovuto all’interazione tra client (invio del form) e server (validazione e restituzione del risultato). L’esperienza utente ne soffre parecchio (anche la nostra pazienza), ma come risolvere? Una possibile soluzione è aggiungere alla validazione lato server quella lato client, tramite JavaScript. Nota che ho scritto aggiungere e non sostituire: la validazione lato server è fondamentale, e non deve mai mancare!
Il principale vantaggio della validazione lato client, è che avviene in tempo reale, permettendo quindi una correzione immediata di eventuali errori.
Reinventare la ruota o riutilizzare?
Anche se è relativamente semplice realizzare un sistema di validazione per form in jQuery partendo da zero, esistono diversi plugin realizzati dalla comunità che già ovviano a questo problema. I vantaggi di utilizzare questi plugin sono diversi:
- Non si deve reinventare la ruota.
- Offrono funzionalità che sono ben testate in tutti i maggiori browser.
- Si ha più tempo per concentrarsi su altri problemi, specifici alla nostra applicazione.
Detto questo, se si hanno delle necessità particolari nulla vieta di creare qualcosa di più adatto. Il form che utilizzeremo è simile a quello creato nella lezione precedente, a cui abbiamo aggiunto dei campi per l’immissione di username e password.
Per la validazione del nostro form di esempio, utilizzeremo il plugin validation dal repository di jQuery. Questo è uno dei plugin più vecchi (la documentazione parla di luglio 2006) e nel tempo si è arricchito di molte funzionalità che lo rendono molto versatile.
Una volta scaricato l’archivio ed estratto il contenuto, copiamo il file jquery.validate.js nella nostra directory di lavoro. Naturalmente abbiamo bisogno anche dell’ultima versione di jQuery e di un file vuoto su cui lavorare. Colleghiamo il tutto nel nostro file XHTML:
... <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript" src="validateYIW.js"></script> ...
Methods e Rules
Il plugin validation si basa su due concetti fondamentali: methods e rules. I methods rappresentano la logica di validazione dei nostri campi: ad esempio il metodo email verifica che il testo inserito rappresenti effettivamente un’email. I metodi forniti con il plugin sono circa una ventina: il più importante è sicuramente il metodo required che permette di specificare se un campo deve essere obbligatorio o meno. Questa è la documentazione completa corredata da esempi.
Le rules invece collegano i methods ai vari campi, permettendo così la validazione del form. Come al solito, un esempio vale più di mille parole. Apriamo dunque il file validateYIW.js nell’editor:
jQuery(document).ready(function($){
//Regole di validazione
$("#formYIW").validate({
rules: {
nome: {
required:true,
minlength:2
},
cognome: {
required: true,
minlength:2
},
email: {
required: true,
email: true
},
username: {
required: true,
minlength: 2,
maxlength: 20
},
password: {
required: true
},
passwordrpt: {
equalTo: "#password"
}
},
...
Il plugin è attivato dalla funzione .validate, che viene applicata al form selezionato tramite l’ID. All’interno della funzione inseriamo l’elemento rules che contiene tutte le regole per il nostro form, campo per campo. Ogni regola è composta dall’attributo name del campo, in cui sono specificati i metodi che si applicano e il loro valore. Analizziamoli uno per uno:
- required: se impostato a true, imposta il campo come obbligatorio.
- minlength: imposta il numero minimo di caratteri che può contenere il campo.
- maxlength: imposta il numero massimo di caratteri per il campo.
- email: se impostato a true, verifica che il testo inserito sia un’email valida.
- equalTo: verifica se il testo immesso è uguale a quello del campo fornito come argomento.
Come puoi vedere la validazione è già funzionante: all’atto dell’invio per ogni errore il plugin aggiunge un messaggio accanto al campo interessato. Di default questi messaggi vengono racchiusi in un elemento label a cui è associata la classe “error”. Per evidenziarli un po’ ho aumentato le dimensioni del testo e li ho colorati di rosso:
#formYIW label.error{
color:#9E142E;
float:none;
font-size:105%;
font-weight:bold;
margin-left:.5em;
}
Avrai notato, però, che tutti i messaggi sono in Inglese. Anche se il plugin fornisce già un file con la localizzazione in Italiano, la trovo troppo generica. Meglio quindi specificare un messaggio personalizzato per ogni tipo di errore: ciò è presto fatto tramite l’utilizzo dell’elemento messages:
...
//Messaggi d'errore
messages:{
nome: {
required: "Devi inserire un nome",
minlength: "Il nome deve essere minimo 2 caratteri"
},
cognome: {
required: "Devi inserire un cognome",
minlength: "Il nome deve essere minimo 2 caratteri"
},
email: {
required: "Devi inserire l'email",
email: "Inserisci una email valida"
},
username: {
required: "Devi inserire l'username",
minlength: "Username minimo 2 caratteri",
maxlength: "Username massimo 20 caratteri"
},
password: {
required: "Devi inserire una password"
},
passwordrpt: {
equalTo: "Le password devono coincidere"
}
},
...
Seguendo la stessa struttura di rules, ho specificato un messaggio per ogni errore, in modo da guidare l’utente nella risoluzione. Il form risultante già potrebbe andar bene: vediamo come possiamo migliorarlo.
Sarebbe utile poter evidenziare in modo più evidente i campi contenenti errori. Per questo scopo possiamo utilizzare gli elementi highlight e unhighlight che permettono di specificare delle azioni da intraprendere in presenza o assenza di errori, rispettivamente. La sintassi per entrambi è la seguente:
...
highlight: function(element, errorClass){
//azioni da intraprendere in caso di errore
},
unhighlight: function(element, errorClass){
//azioni da intraprendere quando l'errore viene risolto
},
...
Come puoi vedere, entrambi gli elementi richiedono una funzione, a cui passare due argomenti:
- element, che rappresenta l’elemento del form con errori
- errorClass, che rappresenta il nome della classe d’errore (di default è “error”)
Possiamo quindi pensare di aggiungere la classe “error” agli elementi li che contengono i vari elementi di input, in modo da applicare un feedback grafico tramite CSS.
...
//azioni da intraprendere in caso di errore
highlight: function(element, errorClass){
$(element).parent("li").addClass(errorClass);
},
//e quando l'errore viene risolto
unhighlight: function(element, errorClass){
$(element).parent("li").removeClass(errorClass);
}
Dato che l’elemento li contiene l’elemento di input, utilizziamo la funzione parent di jQuery per selezionarlo, aggiungendo poi la classe d’errore, sfruttando la concatenazione. Ora non resta che applicare qualche regola CSS, così da evidenziare meglio gli errori:
#formYIW li.error{
background-color:#FFCCFF;
color:#9E142E;
}
Il risultato finale è più che soddisfacente.
Il plugin validation permette largo margine di miglioramento: ad esempio si potrebbe aggiungere un box con il numero di errori posizionato sopra il form, così da fornire un maggior feedback grafico.
Conclusioni e considerazioni
In questo articolo abbiamo visto come sfruttare jQuery per migliorare l’usabilità dei nostri form, a partire dal semplice XHTML+CSS. E con questo chiudiamo la serie sulla progettazione dei form. In seguito vedremo come realizzare il collegamento con un database, tramite PHP.
Voglio lasciarti con un pensiero: i form, nonostante tutti gli abbellimenti grafici e i miglioramenti tramite JavaScript, non hanno avuto una grande evoluzione. Insomma si tratta sempre di riempire un modulo campo per campo! Pensi che esista o esisterà qualche tecnologia o approccio che possa limitare il loro uso, predominante nel web dei nostri giorni?
Download- I form: elementi di base
- I form: struttura e aspetto
- I form: jQuery e considerazioni
- Come realizzare un modulo contatti in PHP
L'autore
23 commenti
Trackback e pingback
-
Web design elements: i form (design) | Your Inspiration Web
[...] I form: jQuery e considerazioni Tags: CSS, Design, Form L'Autore [...] -
Form accessibile: la validazione e uno sguardo al futuro | Your Inspiration Web
[...] ho provato jQuery validate (su cui qui puoi trovare un ottimo tutorial firmato JustB) e LiveValidation, che esiste sia… -
Come realizzare un modulo contatti in PHP | Your Inspiration Web
[...] i vari elementi che compongono il markup degli elementi, come strutturarli in modo valido, e come integrare tali form…
Ottima guida, anche se personalmente preferisco sempre utilizzare l’ajax per la validazione, magari utilizzando qualche classe PHP disponibile in rete!
Ciao lxn ,
come mai? Trovi qualche vantaggio rispetto all’accoppiata Javascript+PHP?
Ps
Grazie per i complimenti ;)
Ci sono problemi di formattazione con Safari versione 4.0.4 su OsX 10.6.2
Se mi dai la Tua e-mail ti mando una foto dello schermo.
Ciao Claudio, benvenuto su YIW.
Grazie per la segnalazione: era un problema di margine che Safari non interpretava correttamente. Adesso dovrebbe essere sistemato.
Grazie ancora :)
JustB, è una preferenza personale, probabilmente non cambia nulla, ma mi fido di più di PHP!
CIao a tutti, scusate se commento in un articolo un po datato, ho seguito questo tutorial per implementare una validazione con jquery, devo farvi veramente i complimenti è veramente ben scritto, ma ho un piccolo problemino che mi tiene fermo da qualche ora.
Il mio form è dentro ad un div e vorrei che la funzione highlight mi colorasse tutto il div (il div ha come id container) e l’id che uso nello script è RicercaCodice.
ho modificato lo script in questo modo:
$(element).parents(“div”).eq(0).removeClass(errorClass);
ma non riesco a far colorare il div.
Ma è possibile?
avete per caso qualche dritta da darmi?
vi ringrazio
Ciao a3ris,
grazie per i complimenti innanzitutto.
Credo che il problema consista nel fatto che non viene puntato l’elemento giusto e quindi l’azione non ha luogo.
Puoi caricare la tua versione online, in modo che io possa darci un’occhiata? Oppure puoi aprire un topic nel forum e postarla lì.
Ciao :)
Salve,
avevo provato a lasciare un commento ma non mi è stato pubblicato.
Questo tutorial mi è stato molto utile ma ora vorrei implementare una cosetta in più: come faccio, ad esempio, a dividere il form in più step? Visualizzando solo, per esempio, un fieldset per volta e lasciando inalterato e funzionante il controllo con jQuery.
Grazie
Ciao webby,
scusa per il ritardo nella risposta.
Per simulare “l’effetto step” puoi utilizzare l’estensione jquery tabs di jqueryUI (http://jqueryui.com/demos/tabs/), creando vari tab dai singoli fieldset e mostrando il pulsante di invio solo nell’ultimo.
Ciao JustB,
in effetti, prima che mi rispondessi, avevo già provato ad usare tabs.js di jQuery.
Il problema è che non so come fare a far si che, per passare ad uno step successivo, devono essere completati tutti i campi.
Come controlli sto usanto il validate.js.
Quello che non so fare è cioè dire al pulsante step di controllare solo i campi del fieldset dello step in questione.
Come dovrei fare?
Grazie.
Buona sera,
ho utilizzato la guida presente in questa pagina per realizzare un form multi-step (attraverso le tabs di jquery) con validazione jQuery.
Il tutto funziona perfettamente, se non fosse per una piccola particolarità: vorrei mettere dei controlli anche per ogni step in modo che se non si compilano prima i campi obbligatori di un singolo step non si possa passare al successivo.
Grazie e complimenti per la guida.
Veramente un’ottima guida.
Ho seguito passo passo ed ho inserito nel mio sito il form, funziona tutto bene in explorer ma in mozzilla firefox mi da dei problemi:
– mi visualizza i numeri delle tabindex
– all’invio con i campi vuoti viene visualizzato il testo di errore senza evidenziare colorato il campo di errore e se per caso premo ancora invio aggiune la stringa di errore nuovamente al testo precedente.
Non so se il tutto è legato al css, oppure non saprei, se mi potete aiutare, grazie.
Ho trovato utilissimo questo tutorial. Vi ringrazio infinitamente. Ora però avrei la necessità di implementarlo con una select box, in modo tale da ottenere il messaggio di errore se l’utente non seleziona nessun valore. Avendo poca esperienza e conoscenza di jquery qualcuno può cortesemente darmi una mano? Grazie
CIao, scusate la mia ignoranza ma dove va inserita la mail del destinatario? Grazie…
Fantastico tutorial ;-)
Ciao, volevo sapere come faccio a verificare se una “checkbox” e puntata o meno? Servirebbe per la privacy grazie mille ;-)
sto utilizzando questo esempio..
molto utile…
ma ora devo validare un IBAN
come faccio?
Ciao Giorgio,
purtroppo questo articolo è un po’ vecchio, come lo è anche il plugin utilizzato nell’esempio.
In linea di massima per validare un IBAN dovresti utilizzare un plugin che ti permetta di estendere le regole di validazione e che ti consenta quindi di realizzare un’espressione regolare ad hoc che validi un IBAN (27 caratteri, deve iniziare per IT se italiano, ecc.)
Puoi provare a utilizzare questo plugin. Nel pacchetto da scaricare trovi degli esempi che ti possono indicare la giusta strada da percorrere.
Ti faccio i complimenti per il tutorial.
Mi hai dato un grosso aiuto a comprendere il controllo.
Pur troppo mi sono bloccato su una cosa, è possibile fari il controllo “campo obbligatorio” uno di quattro?
ossia verificare che uno dei quattro campi necessari sia scritto.
Grazie
Ottimo tutorial, come sempre direi…
volevo chiedervi se è possibile (e soprattutto come) creare un controlla form unico per tutto il sito che magari si cicla tutti gli input del form e quando trova per esempio nell’attributo alt di uno o più input il valore “OBL” da un messaggio di tipo campo obbligatorio.
Il senso è evitare di fare uno script per ogni form presente in un sito
Spero di essere stato chiaro!!!
ciao, ottimo tutorial! ho solo un problema legato all’invio del form, praticamente quando premo invio mi compare la finestrella della conferma, invece io vorrei visualizzare la pagina di conferma