Validazione form con jQuery Validate

In giro si trovano diversi plugin per jQuery per la validazione dei form.

Ho visto che molti siti usare il plugin Validate, e dopo averlo usato ho capito il perchè: molto facile da usare e da integrare.

L'unica cosa che richiede è jQuery e il JS per attivare il plugin:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

Cominciamo con un esempio base.

Questo è il form:

<form action="#" method="post" id="nwsl_form">

Nome: <input class="required" type="text" value="" name="nome" /><br/>

Cognome: <input class="required" type="text" value="" name="cgnome" /><br/>

Email: <input class="required email" type="text" value="" name="email" /><br/>

<input type="submit" name="btn_send" value="Subscribe" />

</form>

Il form ha tre campi, tutti sono obbligatori e la mail deve essere ben formata.

Per impostare queste opzioni ci basta mettere le classi (in questo caso required e email).

Poi per attivare il plugin sul form:

$(document).ready(function(){
   $("#nwsl_form").validate();

});

Basta indicare l'id del form da controllare.

Questo è l'esempio più banale, nel quale non abbiamo personalizzato nulla.

C'è un controllo sui campi, l'errore compare a destra e il messaggio è quello standard.

Andiamo a complicarci la vita.

Quello che vogliamo è:

• gli errore compaiano dove vogliamo noi
• i messaggi di errore siano personalizzati
• controllare anche che una lista non abbiamo selezionato un determinato valore (il primo, il calssico * per intenderci)

Prima di tutto modifichiamo il form:

<div id="error"></div>

<form action="#" method="post" id="nwsl_form">

Nome: <input type="text" value="" name="nome" /><br/>

Cognome: <input type="text" value="" name="cgnome" /><br/>

Email: <input type="text" value="" name="email" /><br/>

Paese: <select name="lingua">

<option>*</option>
<option>Italiano</option>
<option>English</option>

</select><br/>

<input type="submit" name="btn_send" value="Subscribe" />

</form>

Sopra il form abbiamo aggiunto un div con id error, ed è dove compariranno i messaggi di errore.

Nel form ho levato le classi e aggiunto una select dalla quale bisogna scegliere per forza una lingua (non è possibile selezionare il valore *).

La prima cosa importante da notare è che validate non ha un modo standard per dire che la scelta deve essere diversa da n determinato valore.

Di default può controlloare solo l'uguaglianza con equalTo.

Quindi per prima cosa bisogna creare un metodo ad-hoc e usare quello.

Ecco lo script:

jQuery.validator.addMethod("notEqual", function(value, element, param) {
return this.optional(element) || value !== param;
}, "Seleziona un valore diverso da *");

$(document).ready(function(){
$("#nwsl_form").validate({
errorLabelContainer: $("#error"),
rules: {
nome: "required",
cognome: "required",
email: {
required: true,
email: true
},
lingua: {
required: true,
notEqual: '*'
},
privacy: "required"
},        
messages: {  
'nome':{  
required: "Write your name<br/>"
},
'cognome':{  
required: "Write your surname<br/>"
},
'email':{  
required: "Write your email<br/>",
email: "Your email is not valid<br/>"
}, 
'lingua':{  
notEqual: 'Choose a value from language<br/>'
}
}  
});
});

Prima si crea un metodo apposito per la non-uguaglianza e il messaggio che deve comparire.

Poi sotto si mettono le varie opzioni.

errorLabelContainer serve per indicare dove visualizzare gli errori.

Le rules sono le regole di controllo: qui gli si indica i nomi dei campi da controllare e cosa bisogna controllare.

Notate la voce lingua.

Sotto ci stanno i vari messaggi personalizzati.

Come vedete le possibilità sono molte.

Per avere una lista completa dei metodi e dei controli che ci sono didefault potete vedere qua.