JavaScript  »  Articoli  »  Effetti e controlli Javascript 

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!".

Altri articoli

Altre guide

Altre newsletter