Home / Programmazione / Javascript - AJAX / Validazione form con jQuery Validate
Mattepuffo

Validazione form con jQuery Validate

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.