Validazione di un form
La validazione degli input di un form serve per verificare :
- I campi obbligatori sono stati tutti compilati,
- L’email scritta e’ nel formato giusto cioe’ contiene ad esempio @,
- La lunghezza delle informazioni e’ quella necessaria,
- I campi contengono le giuste informazioni,
ad esempio un nome non deve contenere caratteri speciali o simboli di codice,
SICUREZZA :
Un importante obiettivo e’ di garantire la sicurezza del sito, impedendo che si ’inietti’ del codice maligno nel sito e quindi un attacco hacker.
Esistono diversi metodi per la validazione di una form:
- Espressioni regolari utilizzando il linguaggio javascript ma anche ajax.
Ajax puo’ essere usato per esempio per interrogare un data base e
consentire l’invio di un messaggio solo a Clenti registrati
Le espressioni regolari possono essere sia lato client che server con il linguaggio php, ma quest’ultimo richiede una chiamata al server e quindi non raccomandabile
Personalmente suggerisco il linguaggio Javascript. - Un metodo usato e’ il plugin JqueryValidator
Questo plugin e’ un metodo Client side, dove sono disponibili numerose customizzazioni.
Contiene un discreto set di validazioni.
Nel file style_validation_contatti.css le customizzazioni .Css per i messaggi nei campi - Nome
- Newsletter e accettazione della privacy
Puo’ pero’ essere usato anche per :
- Password e conferma della passowrd
- Conferma che due campi siano ugulai o diversi
Per usarlo :
- Come nel caso di bootstrap.js richiede il file jquery.js
- Le funzioni js si ottengono con il collegamento :
<script src="http://cdn.jsdelivr.net/
jquery.validation/1.15.0/
jquery.validate.min.js" >
</script >
Il plugin puo’ poi essere personalizzato:
- nello stile usando l’id #form label.error { istruzioni stile}
- nei messagi con un file .js usando le istruzioni, ad esempio per la email
$("#form").validate({
rules: { //regole di validazione
email: {
required: true
, email: true, //controlla che sia un indirizzo email
minlength: 5, //numero minimo di caratteri
}
}, // fine rules
messages: {//messaggi
email: {
required: "email obbligatoria"
, email: "la email che hai inserito non e’ valida"
, minlength: "la mail deve essere
di almeno 5 caratteri",
}
}
});
Ulteriori informazioni sono disponibili nell’ esempio finale del sito.