blog

Validazione Form con LiveValidation

lunedì 3 gennaio 2011

Validazione Form con LiveValidation

LiveValidation è una libreria javascript che permette di effettuare validazioni lato-client dei dati inseriti in un form. Questa libreria ajax può avvisare gli eventuali errori di compilazione di un modulo nel momento stesso della scrittura in input o all’invio del form ma senza in alcun modo modificare la visualizzazione originale del form e con tempi di elaborazione istantanei, evitando così perdite di tempo e spiacevoli messaggi d’errore generici.

Esistono diverse librerie in javascript per la validazione di un form, ma tra queste LiveValidation sembra essere la più semplice ed efficace, oltre ad essere facilmente implementabile su qualsiasi tipologia di pagina web.

Come iniziare

Per prima cosa bisogna includere il file javascript e css per il funzionamento e la grafica della libreria.
LiveValidation è disponibile in due versioni: standalone e prototype.

<link rel="stylesheet" type="text/css" href="validation.css" /> 
<script type="text/javascript" src="livevalidation_standalone.js"></script>

Validare un input

Subito dopo l’input per l’inserimento del testo, che deve possedere un’identificativo univoco, troviamo il codice javascript che richiama la funzione di validazione della libreria:

<input type="text" id="campo" />
<script type="text/javascript">
    var campo = new LiveValidation('campo');
    campo.add(Validate.Presence); // campo obbligatorio
    campo.add( Validate.Numericality ); // campo numerico
</script>

Per la lista completa delle regole presenti nella libreria LiveValidation consultare la Demo.

Demo Download

Categorie: AJAX

3 Commenti

  1. Mauro

    30 dicembre 2011, 19:16

    Ho fatto delle prove utilizzandolo per costruire dei test e funziona ottimamente.
    Un solo dubbio: se il form da validare è tutto giusto, alla verifica si resetta automaticamente. Si può evitare? Dove bisogna intervenire?
    Grazie.

  2. michela

    9 ottobre 2012, 13:12

    molto utile, ma come faccio, se ho due dati da inserire, a verificare se almeno uno dei due è stato compilato?
    riesco a fare questo controllo sul singolo campo con: nome.add(Validate.Presence);

  3. Simone Forti

    9 ottobre 2012, 14:04

    Ciao Michela, in effetti a questo script manca questa possibilità, puoi comunque usare altri script simili che senz’altro offrono questa opzione

Scrivi un commento

© 2010-2017 SimoneDesign.it    C.F. FRTSMN87P18F844X    P.I 01478670555  -  Licenza Creative Commons