immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Validare form con LiveValidation

di MaiNick | 15 Ott 2008 | javascript | 22 Commenti

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:

<script type="text/javascript" src="js/livevalidation_standalone.js"></script>

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:

<input type="text" id="campo" />
<script type="text/javascript">
    var valCampo = new LiveValidation('campo');
    valCampo.add(funzione della libreria);
</script>

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):

<script type="text/javascript">
    var valCampo = new LiveValidation('campo', { validMessage: "OK" });
    valCampo.add(Validate.Presence, { failureMessage: "Il campo deve essere compilato" });
</script>

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

<script type="text/javascript">
    var valCampo = new LiveValidation('campo', { validMessage: "OK" });
    valCampo.add(Validate.Format, { pattern: /stringa/i, failureMessage: "Devi inserire la parola stringa" });
</script>
[/js>
Il campo sarà validato solo se al suo interno viene inserita la stringa '<em>stringa</em>'.

Per <strong>validare valori numerici</strong> si utilizza il metodo Numericality (<a title="Valore numerico" href="http://www.mainickweb.com/esempi/validare-form/campo-numerico.html" target="_blank">esempio</a>):

<script type="text/javascript">
    var valCampo = new LiveValidation('campo', { validMessage: "OK" });
    valCampo.add(Validate.Numericality, { notANumberMessage: "Devi inserire un valore numerico" });
</script>

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:

<script type="text/javascript">
    var valCampo = new LiveValidation('campo', { validMessage: "OK" });
    valCampo.add(Validate.Numericality, { minimum: 12, maximum: 22, onlyInteger: true, notANumberMessage: "Devi inserire un valore numerico", notAnIntegerMessage: "Deve essere un numero intero", tooLowMessage: "Non deve essere inferiore a 12", tooHighMessage: "Non deve essere superiore a 22" });
</script>

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:

<script type="text/javascript">
    var valCampo = new LiveValidation('campo', { validMessage: "OK" });
    valCampo.add( Validate.Inclusion, { within: [ 'mainick' , 'blog', 'javascript' ] } );
</script>

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

<script type="text/javascript">
    var valCampo = new LiveValidation('campo', { validMessage: "OK" });
    valCampo.add( Validate.Exclusion, { within: [ 'mainick' , 'blog', 'javascript' ] } );
</script>

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):

<script type="text/javascript">
    var valCampo = new LiveValidation('campo', { validMessage: "OK" });
    valCampo.add(Validate.Acceptance, { failureMessage: "Devi spuntarla" });
</script>

Conferma

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

Inserisci password: <input type="password" id="password" /><br />
Conferma password: <input type="password" id="confPass" />
<script type="text/javascript">
    var valConfPass = new LiveValidation('confPass', { validMessage = "OK" });
    valConfPass.add(Validate.Confirmation, { match: 'password', failureMessage: "Le password non coincidono" });
</script>

E-mail

<script type="text/javascript">
    var valCampo = new LiveValidation('campo', { validMessage: "OK" });
    valCampo.add(Validate.Email, { failureMessage: "Devi inserire un indirizzo e-mail valido" });
</script>

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:

/* classe che si applica a tutti i messaggi di validazione */
.LV_validation_message {
    font-weight: bold;
    margin: 0 0 0 5px;
}
/* classe che si applica ai messaggi di validità */
.LV_valid {
    color: #00CC00;
}
/* classe che si applica ai messaggi di non validità */
.LV_invalid {
    color: #CC0000;
}
/* stili applicati ai campi validi */
.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active {
    border: 1px solid #00CC00;
}
/* stili applicati ai campi non validi */
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
    border: 1px solid #CC0000;
}
Tags: , ,

22 Commenti

  1. Angelo ha detto:

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

  2. MaiNickWeb ha detto:

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

  3. Alex ha detto:

    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?

  4. MaiNickWeb ha detto:

    @ 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.

  5. Alex ha detto:

    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?

  6. MaiNickWeb ha detto:

    @ 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.

  7. Claudio ha detto:

    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

  8. Claudio ha detto:

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

  9. MaiNickWeb ha detto:

    @ 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.

  10. Claudio ha detto:

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

  11. Marco ha detto:

    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!

  12. MaiNickWeb ha detto:

    @ 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.

  13. Domi ha detto:

    @ 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.

  14. MaiNickWeb ha detto:

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

  15. BARBARA ha detto:

    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 🙂

  16. valentina ha detto:

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

  17. Gudeoc ha detto:

    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.

    • MaiNick ha detto:

      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.

  18. davide ha detto:

    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

Trackbacks

  1. diggita.it ha detto:

    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…

  2. upnews.it ha detto:

    Validare form con LiveValidation…

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

  3. pligg.it ha detto:

    Validare form con LiveValidation…

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

Lascia un Commento

^ Torna su