jQuery validation: guida alla validazione client

jQuery validation: guida alla validazione client

4973
25
CONDIVIDI
Oggi recensisco una guida su un plugin jQuery molto utile per la validazione client-side: jQuery validation. Contiene un set di regole che permettono di validare form all’interno di pagine web in maniera semplice e veloce. Prima di capire cosa stiamo utilizzando capiamo il perchè.
Se volessimo validare un campo di un form ricorrendo a javascript il codice generato sarà simile al seguente:

  

Fino a qualche anno fa era cosi, per fortuna, adesso, jQuery snellisce il tutto e rende la vita più semplice. Tutto ciò che avete letto su si traduce semplicemente in:

1
2
3
4
5
<script type="text/javascript">
jQuery(function(){
   jQuery("#nomeform").validate();
});
</script>

Adesso avete qualche motivo in più per imparare ad utilizzare bene questa jQuery Validation:

  • Evitare gli sprechi di tempo;
  • Meno codice e quindi pagine più leggere;
  • Facilità di utilizzo

Download

Installazione

Appena scompattata la cartella nel vostro progetto (ad esempio, posizionandola nella root) è necessario dichiarare la libreria e tutte le sue funzioni all’interno della sezione head della pagina web richiamando i file:

  • lib/jquery.js
  • jquery.validate.min.js
1
2
3
4
<head>
   <script type="text/javascript" src="lib/jquery.js" /></script>
   <script type="text/javascript" src="lib/jquery.validate.min.js" /></script>
</head>

da questo momento in poi tutte le regole di validazione sono a nostra disposizione.

Utilizzo

Supponiamo di voler validare il campo Nome del seguente form:

1
2
3
4
5
<script type="text/javascript>
  jQuery(function(){
     jQuery("#mioform").validate();
  });
</script>
1
2
3
4
<form method="post" name="contatti" id="mioform">
   <label for="nome">Nome</label>
   <em>*</em><input id="nome" name="nome" class="required" minlength="2" />
</form>

Volutamente ho diviso in due aree il documento, la parte javascript inizializza il selettore jQuery selezionando il form sottostante (id=”mioform”) mentre nella parte html l’input che voglio validare avrà settato class=”required” che di default è il selettore html per la validazione. In questo modo il plugin capisce in automatico che tutti i campi con quella classe devono essere validati.

Capito questo piccolo esempio possiamo immaginare che è possibile validare il form secondo altre regole, ad esempio possiamo verificare che vengano inseriti almeno 2 caratteri prima dell’invio del form. Per fare questo, ho inserito nel form minlength=”2″:

1
<input id="nome" name="nome" class="required" minlength="2" />

Ricapitolando, class=”required” è condizione necessaria per far si che quel campo sia sottoposto a validazione e può essere raggiunto da altre regole come minlength=”2″ che abbiamo precedentemente visto.

Un altro modo per utilizzare la libreria senza andare a “sporcare” l’html è il seguente:

1
2
3
4
5
6
7
8
9
10
jQuery("#mioform").validate({
   rules: {
     nome: "required",
 
     email: {
       required: true,
       email: true
     }
   }
})

In questo modo su due campi nome e email imposto la regola required:true e per il campo email specifico la validazione controllando che la stringa contenga @ e che sia seguita da una stringa con un punto, per far questo mi avvalgo della regola email:true.

Regole

E’ chiaro, quindi che esistono un set di svariate regole da applicare per poter validare il form in maniera più scrupolosa ed attenta. Segue un elenco.

  • accept verifica che l’estensione di un file inserito sia tra quelle citate delimitate da simbolo |
  • creditcard per controllo su carte di credito;
  • date verifica che una stringa sia in formato data;
  • dateISO verifica che una stringa formato data risponda agli standard ISO;
  • digits controlla che il contenuto inserito sia un numero intero;
  • email validazione email con controllo su @ e .
  • equalTo verifica che il valore X sia uguale ad un valore Y;
  • max verifica che il valore X inserito in un campo non sia maggiore rispetto al max=”N”;
  • maxlength verifica il massimo numero di caratteri che deve essere inserito;
  • min verifica che il valore X inserito in un campo non sia minore rispetto al min=”N”;
  • minlength come precedentemente spiegato verifica il minimo numero di caratteri da inserire all’interno di un campo di tipo input;
  • number verifica il formato numerico;
  • numberDE a differenza di number accetta decimali separati da una virgola;
  • range verifica che il set di caratteri inseriti all’interno del campo comprenda un numero da X a Y;
  • rangeLength
  • remote accetta un URL esterno di validazione;
  • required indica come nell’esempio se il campo è soggetto a validazione o meno;
  • url controlla che il valore inserito rispetti il formato URL

Esempio

L’esempio finale dovrebbe schiarire ogni dubbio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
   <head>
      <title>jQuery Validation</title>
      <script type="text/javascript" src="lib/jquery.js" /></script>
      <script type="text/javascript" src="lib/jquery.validate.min.js" /></script>
   </head>
 
   <body>
       <script type="text/javascript">
       jQuery(function(){
       jQuery("#mioform").validate({
          rules: {
              nome: "required",
 
              email: {
                 required: true,
                 email: true
              }
          }
       });
       });
       </script>
 
       <form method="post" name="contatti" id="mioform">
           <label for="nome">Nome</label>
           <em>*</em><input id="nome" name="nome" />
 
            <label for="nome">Email</label>
            <em>*</em><input id="email" name="email" />
       </form>
    </body>
</html>

Links utili

Alcuni links utili per la documentazione del progetto

  • Fabio Conchiglia

    guida utilissima, ho provato ad utilizzare l’operatore range ma il risultato della validazione è null, mi passa i valori del form senza validarli.

    campo: {
    required: true,
    range: ‘5 | 10’
    }

    dove sbaglio?

  • web dev

    utilissima
    thanks

  • Paki R.

    Utilizzata più volte ma spesso mi dimentico in che modo va utilizata, questa guida mi sarà molto utilie. Grazie 😉

  • Ottimo plugin, segnalo solo di fare attenzione a utilizzare la versione di Jquery che non vada in conflitto con il plugin…

  • @Fabio Conchiglia
    prova cosi: range: [13, 23]
    è più corretto.

  • emporioDev

    ciao peterborto, con quali plugin ti ha dato conflitto? quale versione di jquery è più corretto utilizzare?

  • Fabio Conchiglia

    grazie Fabiana!

  • mario.delgrosso63@gmail.com

    grazie per la guida,può sempre esser utile. retweet

  • essential

    molte grazie….sul sito di jquery non è molto intuitivo in realtà non si capiva molto . che tu sappia esiste un plugin per wordpress che integri gia la validazione su qualsiasi form?

  • nicola

    Un plugin wp per cosa? Non credo proprio…

  • fabri

    con Ajax come si interfaccia? Uilizzo una creazione ricorsiva di campi input con ajax e vorrei capire come posso fare per mantenere la validazione anche per quelli.

  • Cut&Paste

    Davvero notevole il plugin di jquery anche se considero una perdita di tempo la validazione client se dall’altra parte non c’è una validazione server.

  • Francesco

    @fabri: prova ad utilizzare la funzione live di jquery senza ricorrere ad ajax.

  • Aurora Dellerba

    ben fatto! 😉

  • Pier C.

    Per i conflitti con i plugin basta utilizzare jquery no conflict!

    • Prima di tutto vorrei clamoimentmrpi per il sito! E’ per me una vera fonte di ispirazione.Proprio ieri ho effettuato le registrazione al Apple Developer program, ho ricevuto la mail di avttivazione oggi. Nella mail era presente un link che doveva essere cliccato per confermare la registrazione. Cliccando sul link mi sono ritrovati davanti a questo messaggio:We are unable to activate your Apple Developer Program membership because we are unable to successfully verify your identityCosi dal mio Enrollement status ho capito che dovevo inviare un fax con la copia di un mio documento.Ora mi chiedo e8 successo anche a voi? Quanto dovrf2 aspettare ancora??

  • c3

    domanda: come faccio a modificare i messaggi d’errore in inglese?

    • Mario Concina

      dovresti modificare il core, ossia il file “jquery.validate.min.js”

  • nik

    Io avrei una domanda nel caso in cui volessi validare delle tab come riesco a collegare lo script di validazione alle tab il bottone submit.
    Precisamente una volta che premo submit mi aspetterei i messaggi che indicano i campi mancanti su tutte le tab.
    Grz

  • federico

    ciao e complimenti per l’ottima guida.
    forse una cosa manca ossia la validazione condizionata….devo riuscire a validare un campo input solo se un determinato check è attivo, mi spiego meglio:

        Altro
        (Specificare)

    Il campo “altro_specificare” deve essere validato solo se “flag_altro” è checked!

    Sul sito ufficiale non riesco a capirci molto in inglese…qualcuno può aiutarmi!??!? :\

    • Cookedapple

      Esempio:
      textfield: { required: function() { return $(‘input[name=checkfield]:checked’).size() == 1;} },

  • Pingback: The Professional Sites » Blog Archive()

  • antony

    Ciao Mario, ho preso spunto per creare un form, la validazione la fa ma quando metto i dati corretti, non passa la palla al metodo di invio, ovvero la mail non parte. (il file php è testato e manda la mail). Puoi dirmi se è una questione di logica o proprio di sintassi. Dove potrei postare il codice?
    grazie per la risposta

    • Mario Concina

      Dovresti innanzitutto vedere se nella pagina ci sono errori javascript. Parti da li per capire se è un errore di logica o sintattico.

  • Marco

    Ciao,
    ho un problema con la validazione di un campo, che stampa un elenco di checkbox che poi recupero nella pagina di raccolta dati con un foreach, dato che per ognuna delle checkbox “chekkate” devo fare un insert.
    Il campo si presenta così:
    <input type="checkbox" id="cat_segnalato" name="selcats[]" value="”>
    Non riesco a trovare il modo di passargli il nome del campo.. e mi salta la validazione di questo campo.
    Riesci a darmi una mano?
    Grazie mille
    Marco