Affontiamo il problema della validazione dei form, problema annoso in passato ma oggi risolvibile più agevolemnte.
Useremo jQuery e il suo plugin jQuery Validate per risolvere la nostra questione, per inciso il plugin è in sé interessante poiché definisce i metodi di validazione più comuni, inoltre permette l’estensione con l’aggiunta di personalizzazioni.
Partiamo dal form con 3 campi di input obbligatori: il nome, l’email e lo username:
<form name=”info” id=”info”>
<fieldset>
<legend>Dati</legend>
<label for=”nome”>Nome</label><br />
<input type=”text” id=”nome” name=”nome” /><br /><br />
<label for=”email”>Email</label><br />
<input type=”text” id=”email” name=”email” /><br /><br />
<label for=”username”>Username</label><br />
<input type=”text” id=”username” name=”username” /><br /><br />
<input type=”button” id=”submit” value=”invia” />
</fieldset>
</form>
Nell’html mettiamo anche un div nascosto che useremo per dialogare con i nostri utenti:
<div id=”dialog” title=”Test”></div>
Prepariamo anche lo stile della label per la gestione degli errori:
label.error{ font:bold 14px Arial; color:#900;}
Passiamo alla parte di validazione vera e propria. Come prima cosa al caricamento della pagina agganciamo gli eventi che vogliamo gestire.
Il primo sarà relativo alla validazione dello username e andremo a verificare che non sia presente nel db con una chiamata ajax (si osservi che questa verifica non esenta dalla verifica server-side).
Quindi all’evento blur sul nostro campo, andremo a leggere il valore digitato dall’utente e manderemo una chiamata ajax al server web, in caso di risposta negativa, rimuoviamo la label dell’errore,
per evitare duplicazioni, la rimettiamo, svuotiamo il campo, altrimenti semplicemnte rimuoviamo la label dell’errore.
$(‘#username’).blur(function(){
var username=$(‘#username’).val();
$.ajax({
type:’GET’,
url:’data/test_username.php?username=’+username,
success:function(str){
if(str==’KO’){
$(“#username_error”).remove();
$(‘#username’).val(”);
$(‘#username’).after(‘<label for=”username” id=”username_error”>Username presente</label>’);
$(‘#username’).focus();
}
else{$(“#username_error”).remove();}
}
})
})
La successiva porzione di codice validerà il form e ci faremo restituire un valore booleano in base all’esito dell’operazione,
quindi al click sul submit, ma sipoteva anche dire al submit del form, aggiungiamo la vera validazione:
$(‘#submit’).click(function(){
var valido=$(‘#info’).validate().form();
})
Nel metodo validate specificheremo rules e messagges come ben spiegato nella pagina del plugin
rules:{
nome:’required’,
email:{
required:true,
email:true
},
username:{
required:true,
minlength:2
}
},
messages:{
nome:’Campo obbligatorio’,
email:{
required:’Campo obbligatorio’,
email:’Devi inserire un indirizzo valido’
},
username:{
required:’Campo obbligatorio’,
minlength:’Devi inserire almeno 2 caratteri’
}
}
Nel nostro caso ci siamo semplicemente limitati ai campi obbligatori e alla validazione dell’email.
Ultimo step l’invio del form.
Se la validazione ha avuto successo invieremo una chiamata ajax al nostro server web, passando i dati del form serializzati:
$.post(‘dati/inserisci.php’,$(‘#info’).serialize()
per poi gestire con una callback l’esito della risposta che se positivo implicherà:
1. nascondere il form
2. mostrare un messaggio di avviso all’utente
3. sostituire un contenuto visuale al posto del form
function(){
$(‘#info’).hide();
$(‘#dialog’).dialog().html(‘<p>Tutto ok!</p>’);
$(‘#contenitore’).append(‘<p>Record inserito</p>’);
}
Per testare tutte le funzionalità dell’esempio lo username presente è “pippo”
