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.