|
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="/site/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!!
|
