Jquery validation: Validazione di un form con jquery

La validazione ed il controllo di un form è sempre un ottimo modo per indirizzare i navigatori del vostro sito ad inserire le informazioni giuste e nel miglior modo. In questo articolo voglio parlare di un ottimo plug-in jquery dal nome: jquery validation

Per prima cosa assicuratevi di aver scaricato l’ultima versione del plug-in dall’url linkato qua sopra. Una volta scaricato il plug-in in formato zip, apritelo e dovreste trovarvi di fronte ad una situazione molto simile a quella riportata in figura qua sotto:

Il file che vi servirà è nella cartella dist. Per la validazione “standard” sarà necessario solo il file “jquery.validation.js” mentre per funzioni più specifiche vi occorrerà anche il file “additional-methods.js“. Ricordate, naturalmente, che l’inclusione di jQuery è d’obbligo! A questo punto, la vostra pagina dovrà includere i seguenti file

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../lib/jquery.validate.js"></script>
<script src="../lib/additional-methods.js"></script>

Una volta inclusi i file necessari pensiamo alla costruzione del nostro form. In questo esempio mi occuperò soltanto di inserire alcuni campi.

</pre>
<form id="formProva" action="" method="get" name="formProva"><label for="testo">Testo generico obbligatorio:</label>
<div class="campo"><input id="testo" name="testo" type="text" /></div>
<label for="email">Indirizzo email:</label>
<div class="campo"><input id="email" name="email" type="text" /></div>
<label for="email2">Indirizzo email da ripetere:</label>
<div class="campo"><input id="email2" name="email2" type="text" /></div>
<label for="numero">Solo numero:</label>
<div class="campo"><input id="numero" name="numero" type="text" /></div>
<input type="submit" value="Validazione!" /></form>
<pre>

Per il CSS, come sempre, l’unico limite è la vostra fantasia. Nella DEMO che ho creato per questo articolo ho utilizzato le seguenti regole CSS

<!-- CSS -->

Bene, a questo punto passiamo a vedere come configurare ed utilizzare il plug-in jquery! Prima di farlo però voglio precisare una cosa. Il Plug-in permette varie tipologie di validazione. Semplicemente aggiungendo required=”required” al campo il plug-in sarà già in grado di validare questo form, con una grafica molto carina per altro. Nel nostro esempio però andremo a definire le regole per ogni campo come segue. Attenzione!!! Non definiremo solo le regole di validazione bensì anche lo style e il tipo di messaggio dell’eventuale errore!

<script>// <![CDATA[
 jQuery.validator.setDefaults({
 debug: true,
 success: "valid"
 });
 $( "#formProva" ).validate({
 rules: {
 testo: {
 required: true
 },

 email: {
 required: true,
 email: true
 },

 email2: {
 required: true,
 email: true,
 equalTo: "#email"
 },

 numero: {
 required: true,
 number: true
 }
 },
 messages: {
 email: {
 required: "<font color=#ff0000>EMAIL OBBLIGATORIA</font>",
 email: "<font color=#ff0000>INDIRIZZO EMAIL NON VALIDO</font>",
 },

 email2: {
 required: "<font color=#ff0000>EMAIL OBBLIGATORIA</font>",
 equalTo: "<font color=#ff0000>EMAIL NON UGUALE ALLA PRECEDENTE</font>",
 email: "<font color=#ff0000>INDIRIZZO EMAIL NON VALIDO</font>",
 },

 testo: "<font color=#ff0000>CAMPO OBBLIGATORIO</font>",

 numero: "<font color=#ff0000>INSERIRE SOLO NUMERI</font>",
 },

 submitHandler: function(form) {
 form.submit();
 }
 });
// ]]></script>

Ecco fatto! Con questo esempio avete la base per fare tutte le validazioni dei vostri form!

Di seguito vi riporto la pagina completa:

Per la DEMO di questo articolo cliccate qua: validazione di un form con jquery.

Commenti, discussioni, sviluppo e tutto quanto sono sempre ben accetti per il bene di tutti!