jQuery validazione form via ajax e submit

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”