jQuery validation: guida alla validazione client

10 Giugno 2011Scritto da mario24
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:


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

   
   

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:


      
   

   
       

       
* *

Links utili

Alcuni links utili per la documentazione del progetto

Scritto da mario

Agile web e mobile developer, attraverso il blog mette in campo l'esperienza acquisita quotidianamente sul mondo del lavoro.

24 comments

  • Fabio Conchiglia

    11 Giugno 2011 at 19:04

    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?

    Reply

  • web dev

    11 Giugno 2011 at 23:54

    utilissima
    thanks

    Reply

  • Paki R.

    12 Giugno 2011 at 8:09

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

    Reply

  • peterborto

    13 Giugno 2011 at 8:32

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

    Reply

  • Fabiana Testini

    13 Giugno 2011 at 18:39

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

    Reply

  • Fabio Conchiglia

    14 Giugno 2011 at 12:49

    grazie Fabiana!

    Reply

  • mario.delgrosso63@gmail.com

    14 Giugno 2011 at 15:31

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

    Reply

  • essential

    15 Giugno 2011 at 19:08

    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?

    Reply

  • nicola

    16 Giugno 2011 at 14:00

    Un plugin wp per cosa? Non credo proprio…

    Reply

  • fabri

    16 Giugno 2011 at 16:36

    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.

    Reply

  • Cut&Paste

    16 Giugno 2011 at 18:59

    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.

    Reply

  • Francesco

    17 Giugno 2011 at 21:25

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

    Reply

  • Aurora Dellerba

    17 Giugno 2011 at 21:35

    ben fatto! 😉

    Reply

  • Pier C.

    18 Giugno 2011 at 8:06

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

    Reply

    • Hanneke

      10 Giugno 2012 at 8:53

      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??

      Reply

  • c3

    20 Giugno 2011 at 20:57

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

    Reply

    • Mario Concina

      15 Luglio 2011 at 0:26

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

      Reply

  • nik

    11 Gennaio 2012 at 12:09

    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

    Reply

  • federico

    26 Maggio 2012 at 17:47

    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!??!? :\

    Reply

    • Cookedapple

      22 Maggio 2013 at 17:57

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

      Reply

  • Pingback: The Professional Sites » Blog Archive

  • antony

    12 Ottobre 2012 at 15:02

    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

    Reply

    • Mario Concina

      12 Ottobre 2012 at 16:40

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

      Reply

  • Marco

    22 Novembre 2012 at 14:59

    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

    Reply

Lascia un commento

Your email address will not be published. Required fields are marked *

https://www.fullstacksas.it/wp-content/uploads/2021/11/FULLSTACK-LOGO-MINI-150x131.png

Via Vito Rosa, 7
70127 Bari – IT
P.iva – 08087100726

Gli attrezzi del mestiere

Full Stack Sas – p.iva 08087100726 – Rea n. BA – 603324

Copyright 2019. Bold Themes. All rights reserved.

bt_bb_section_top_section_coverage_image