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!
Hi there, everything is going nicely here and ofcourse every one is sharing data, that’s genuinely good, keep up writing.