javascript

Validare form con LiveValidation

I form sono molto utili per un iterazione con gli utenti visitatori del sito, ma nella compilazione non c’è situazione più noiosa di essere avvisati, riguardo un errore di compilazione, dopo averlo inviato.

Ci occupiamo in questo articolo di LiveValidation, una libreria in javascript che sto studiando in questi giorni, che risulta (tra quelle provate) la più semplice nell’utilizzo ed efficace.

Il sito ufficiale della libreria presenta oltre al download, una completa documentazione e una pagina ricca di esempi. Sono previste due versioni: una versione basata su Prototype e quella standalone (per utilizzarla con qualsiasi altro javascript framework), e per ciascuna è disponibile una versione compressa.

Validare input

Per utilizzare la libreria bisogna inserirla nella sezione head del documento, in questo modo:

Tutti i campi da validare nel form della pagina devono essere associati ad un ID identificativo univoco. Subito dopo la form, bisogna inserire il codice javascript che richiama la funzione di validazione della libreria:

Nella prima riga del codice abbiamo creato un nuovo oggetto LiveValidation che ha come argomento l’ID dell’input, andiamo poi ad aggiungere all’oggetto il metodo della libreria che vogliamo utilizzare per la convalida dell’input.

Il primo esempio prodotto, aggiungendo il metodo Presence, esso effettua la verifica sull’avvenuta compilazione del campo. Provando l’esempio noterete la presenza degli avvisi in inglese, impostati di default incorporati nel codice della libreria.

Per poterli personalizzare, senza mettere mani al codice della libreria, LiveValidation consente di definire una serie di parametri per ogni modulo, tra cui dei messaggi che andranno a sovrascrivere quelli di default.

Modifichiamo il primo esempio, personalizzando i messaggi di avviso (esempio):

Il metodo Format consente di validare il contenuto inserito nel campo rispetto ad un’espressione regolare definita come parametro (esempio):

In questo caso, per impostare il messaggio di non validità, il parametro da usare è notANumberMessage.

Al metodo Numericality è possibile passare ulteriori parametri:

  • onlyInteger = true – validare solo numeri interi (non decimali)
  • is: 15 – verifica che il valore inserito sia 15
  • minimum: 12 – verifica che il valore inserito sia maggiore o uguale a 12
  • maximum: 22 – verifica che il valore inserito sia minore o uguale a 22

I parametri sopra possono essere combinati, l’unica espressione che non è possibile combinare è ‘is’ con ‘minimum’ o ‘maximum’, dove ‘is’ avrà la precedenza. Questo esempio verifica che il valore inserito rientri in un range e sia intero:

Altri tipi di validazione

Lunghezza

E’ possibile utilizzare gli stessi parametri descritti sopra per il metodo Length, con il quale è possibile validare un campo rispetto al numero dei caratteri inseriti.

Inclusione ed esclusione

E’ possibile impostare una serie di valori rispetto alla quale verificare la corrispondenza esatta o parziale del contenuto inserito nel campo. Attraverso il metodo Inclusion il campo sarà validato solo se contiene i valori passati:

Al contrario, usando il metodo Exclusion il campo non sarà validato se contiene i valori passati:

Passando il parametro ‘partialMatch: true’ è possibile controllare anche solo su una parte della stringa.

Checkbox

Attraverso il metodo Acceptance è possibile verificare che un checkbox sia stato o meno spuntato (esempio):

Conferma

Il metodo Confirmation verifica l’uguaglianza tra due input, molto utile per la verifica della password:

E-mail

Validare form

E’ possibile combinare i diversi metodi descritti sopra su un solo campo.

Il costruttore della libreria consente di istituire il campo del form come un oggetto LiveValidation a cui è possibile passare alcuni parametri facoltativi:

  • validMessage – messaggio visualizzato alla validazione del campo
  • onlyOnBlur: true – consente di effettuare la validazione solo quando l’input perde il focus
  • wait: 500 – tempo desiderato prima di validare l’input dall’ultima volta che si è premuto un tasto
  • onlyOnSubmit: true – consente di effettuare la validazione sol quando il modulo sarà inviato

Personalizzare lo stile degli avvisi

Tramite un foglio di stile possiamo personalizzare lo stile e la formattazione degli avvisi. E’ possibile definire appena cinque regole con classi che si applicano ai messaggi di avviso e ai campi:

  • Ohh.. grande post, mi serviva qualcosa del genere! grazie, ciao!

    15 ottobre 2008
  • @ Angelo:
    Grazie a te Angelo, è sempre un piacere per me averti come lettore

    15 ottobre 2008
  • Validare form con LiveValidation…

    Un tutorial per sfruttare al massimo la libreria LiveValidation dedicata alla validazione client-side di moduli. I form sono molto utili per un iterazione con gli utenti visitatori del sito, ma nella compilazione non c’è situazione più noiosa di es…

    15 ottobre 2008
  • Validare form con LiveValidation…

    Un tutorial per sfruttare al massimo la libreria LiveValidation dedicata alla validazione client-side di moduli…

    15 ottobre 2008
  • Validare form con LiveValidation…

    Un tutorial per sfruttare al massimo la libreria LiveValidation dedicata alla validazione client-side di moduli…

    15 ottobre 2008
  • Alex

    ciao e complimenti.
    Ho un problema e forse mi puoi aiutare.
    Devo validare più campi, in modo da passare all’utente sugggerimenti sulla compilazione del campo ( accetto solo un intervallo di numeri da 100 a 1000 in uno e da 150 a 1500 in un altro campo), ma uno dei due deve poter essere accettato anche se vuoto senza bloccare l’invio del form. Dunque è il semplice caso del campo opzionale, ma non trovo suggerimenti in merito sicuramente a causa dei miei limiti su javascript.
    Puoi aiutarmi?

    15 ottobre 2008
  • @ Alex: ciao e grazie per i complimenti. Allora puoi vedere uno degli esempi descritti sopra; ad entrambi i campo aggiungi la proprietà Validate.Numericality specificando che siano solo valori di tipo numerico, poi in questo metodo specifici i parametri o caratteristiche che deve avere la validazione: minimum: 100 valore minimo (100 o 150); maximum: 1000 valore massimo (1000 o 1500); onlyInteger: true solo valori interi.
    Poi per specificare che uno dei due campi deve essere obbligatorio aggiungi anche il metodo Validate.Presence.
    Se hai ancora problemi contattami.

    15 ottobre 2008
  • Alex

    Intanto grazie per la risposta, comunque gradita e magari utile per il futuro. Mi pare di aver provato a fare il tutto solo con la clausola numericality, ma mi pare non funzionasse proprio come volevo… Ad ogni modo ho risolto optando per il plugin validate di jquery perchè mi è parso più completo grazie a tante altre possibilità e con il quale ho trovato subito la soluzione.
    So che ogni libreria ha i suoi pro e i suoi contro, e sicuramente sarà più pesante di LiveValidation per le sue varie funzioni ma di jquery ho trovato molti commenti positivi … condividi la scelta?

    15 ottobre 2008
  • @ Alex: Poiché LiveValidation in versione standalone compressa pesa solo 12Kb, bisogna che verifichi se il peso della libreria jQuery + il plugin siano favorevoli a un loro utilizzo, soprattutto se poi jQuery non la utilizzerai in altri casi.
    Comunque ti dò pienamente ragione su jQuery non si discute… una delle librerie più potenti ma soprattutto semplice da utilizzare.
    E’ la mia preferita in campo di sviluppo.

    15 ottobre 2008
  • Claudio

    Ciao, per prima cosa complimenti per l’articolo, l’ho trovato molto utile.

    Nel form che sto costruendo ho inserito anche un ma non so come poter usare questi controlli su questo campo.

    mi puoi aiutare? grazie

    15 ottobre 2008
  • Claudio

    ho inserito anche select – option “non so perchè nel precedente mess ha cancellato una parte”

    15 ottobre 2008
  • @ Claudio: allora puoi effettuare tutti i controlli di validazione che vedi descritti sopra e quelli presenti nella pagina di documentazione di LiveValidation anche sui campi select, però ricorda che verranno verificati sul contenuto di value dei tag option.

    15 ottobre 2008
  • Claudio

    @ MaiNickWeb:
    Ok ho risolto, grazie per l’aiuto 🙂

    15 ottobre 2008
  • Marco

    Salve, vorrei validare un campo di data, in particolare, vorrei fosse inserita una data nel formato gg/mm/aaaa.
    Sapreste spiegarmi se e come si può fare con livevalidation?

    Grazie e complimenti per l’articolo!

    15 ottobre 2008
  • @ Marco: mi dispiace ma questa libreria non permette di validare un campo data. Al limite potresti dividere la data in tre campi input (giorno, mese, anno) ed effettuare la validazione con livevalidation sui singoli campi specificando minimo e massimo valore numerico.

    15 ottobre 2008
  • Domi

    @ MaiNickWeb:
    Ciao, per favore ho la necessità di validare dei campi in un form creato con FacileForms un componente che gira in Joomla, mi potresti indicare come fare (come collocare la libreria e come fare ad inserire il codice di validazione…).
    Ti ringrazio anticipatamente.

    15 ottobre 2008
  • @ Domi: mi dispiace ma non avendo mai utilizzato Joomla, non saprei proprio come aiutarti.

    15 ottobre 2008
  • BARBARA

    MaiNickWeb ha scritto:

    value

    <SELECT name="txtprovdomi" id="provdomi" tabindex="14"

    Agrigento (AG)
    Alessandria (AL)….

    A.A.A. Cercasi un’anima pia che mi scriva (così copio ed incollo e NON posso sbagliare) il codice per escludere il valore “none”.
    GRAZIE 🙂

    15 ottobre 2008
  • valentina

    Ciao, bellissimo articolo: complimenti.
    Mi serviva proprio un tutorial del genere, il difficile ora è ricordarmi tutte queste cose 🙂

    15 ottobre 2008
  • Gudeoc

    Ciao a tutti e complimenti per la spiegazione. Io uso questa Libreria già da un po’ e mi sono accorto di questa pecca…
    Come faccio se ho un campo PROVINCIA dove voglio max 2 lettere e soprattutto 2 lettere e non numeri?
    Qualcuno ha avuto un problema simile.
    Grazie anticipate al’eroe che mi risponde.
    Buon weekend a tutti.

    15 ottobre 2008
    • Ciao Gudeoc puoi risolvere il problema utilizzando un’espressione regolare

      var provincia = new LiveValidation( "provincia", { validMessage: "Ok!", wait: 500 } );
      provincia.add( Validate.Format, { pattern: /^[A-Za-z]$/i, failureMessage: "Solo lettere!" } );
      provincia.add( Validate.Length, { is: 2 } );

      Spero di esserti stato utile, alla prossima.

      15 ottobre 2008
  • davide

    scusate ma come posso impedire l’ inserimento di spazi al posto di testo.
    lui gli spazi me li valida come testo e permette di anadare avanti!!
    grazie

    15 ottobre 2008

LEAVE A REPLY