Validazione form con LiveValidation

LiveValidation libreria Javascript che serve per validare i form in tempo reale.

Può essere usato in modalità stand-alone o come plugin di Prototype.

Io ho optato per la prima soluzione.

Scaricate la libreriria da qua e aggiungetela alla pagina:

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

Le opzioni che ha sono molte, come anche i validatori:

• campo vuoto
• email
• numeri
• ecc

Qui trovate vari esempi.

Io vi mostro quelli che ho usato io nel mio form:

<form name="comments-form" action="">
<p>
<label>Email</label>          
<input type="text" name="email" value="" size="22" id="com_email" />
<script type="text/javascript">
var campo = new LiveValidation('com_email', { validMessage: "\u221a" });
campo.add(Validate.Presence);
campo.add(Validate.Email);
</script>
</p>
<p>
<textarea name="text" cols="40" rows="8" id="com_text"></textarea>
<script type="text/javascript">
var campo = new LiveValidation('com_text', { validMessage: "\u221a" });
campo.add(Validate.Presence);
</script>
</p>
<div>
<input type="submit" value="Invia il tuo commento" name="sumbit-comment" />
</div>
</form>

Prendiamo il campo email:

<script type="text/javascript">
var campo = new LiveValidation('com_email', { validMessage: "\u221a" });
campo.add(Validate.Presence);
campo.add(Validate.Email);
</script>

Prima gli indico l'id del campo da validare e poi gli aggiungo i validatori; in questo caso due perchè il campo non deve essere vuoto e la mail deve essere in formato corretto (ovviamente non verifica se la mail esiste o meno, ma solo la correttezza della forma).

Possiamo anche digrli di avere un messaggio personalizzato ovviamente.

E infine possiamo anche indicare uno stile specifico; questo è quello che passa il sito ufficiale:

.LV_validation_message{ font-weight:bold; margin:0 0 0 5px; } .LV_valid { color:#00CC00; } .LV_invalid { color:#CC0000; } .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; } .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; }

Le possibilità sono molte; questo è solo un punto di partenza.

Oltre agli esempi ufficiali vi posto anche quest'ottimo link.

Per quanto mi riguarda questa libreria è fantastica!!