Quando si sviluppa un sito con uno o più form html ci si trova sempre di fronte alla necessità di validare i dati inseriti dagli utenti.
Con validazione si intende il processo di verifica della correttezza dei dati. Ad esempio un campo nome verosimilmente non dovrà contenere dei caratteri numerici, mentre un campo email dovrà avere un formato ben preciso, con il carattere '@' e il dominio alla fine. Con il processo di validazione, si controlla che tutti i dati inseriti rispettino le regole definite, se tutto è corretto, i dati vanno inviati o salvati, in caso contrario vengono mostrati dei messaggi di errore.
E' sempre buona norma eseguire la validazione lato server, ma per snellire il lavoro del server e per rendere l'interfaccia utente più reattiva è spesso comodo eseguire prima una validazione lato client.
In questo caso ci viene aiuto una libreria molto semplice ma che ha tutto quel che serve: Parsley.js.
Installare e configurare Parsley.js
L'installazione è banale, è sufficiente scaricare la libreria dal sito e caricarla sul proprio spazio web.
Parsley richiede la presenza della libreria jQuery, che va inclusa nella pagina prima di Parsley, la quale poi è composta da un singolo file, minificato o non, che è possibile scaricare dalla sezione download del sito.
Includere la libreria nelle pagine è banale e si fa con una semplice direttiva nell'header della pagina:
<scripttype="text/javascript"src="parsley.js"></script>
dove "parsley.js" va eventualmente sostituito con il percorso e nome dove abbiamo caricato la libreria.
Utilizzare Parsleyjs è semplicissimo e non richiede praticamente di scrivere nessuna riga di codice javascript. Tutta la configurazione viene fatta aggiungendo degli attributi ai tag dei nostri form da validare.
Supponiamo di avere un form che chiede nome, cognome e indirizzo email, con nome e cognome obbligatori:
<formdata-validate="parsley">
Nome: <inputtype="text"data-required="true"/><br/>
Cognome: <inputtype="text"data-required="true"/><br/>
Email: <inputtype="text"data-type="email"/><inputtype="submit"value="Ok"/></form>
Come si vede dal codice qui sopra le opzioni aggiuntive rispetto a un normale form sono minime:
- Nel tag form è stato messo l'attributo data-validate="parsley" ad indicare che quel form verrà validato da Parsley.
- Nei tag input nome e cognome è stato settato l'attributo data-required="true" che indica che quei due campi sono obbligatori
- Nel campo email è impostato l'attributo data-type="email" che indica a Parsley di controllare che il valore, se immesso, abbia il formatto corretto di un indirizzo email
La libreria fornisce una buona quantità di opzioni di validazione preimpostate ma volendo se ne possono aggiungere.
Ho preparato una semplicissima pagina di esempio con pochi fronzoli che implementa il codice scritto sopra.
La documentazione sul sito ufficiale è piuttosto chiara e tratta anche altri aspetti più approfonditi, come lo styling dei messaggi di errore o la scrittura di plugin.
Se volete qualche suggerimento rapido da parte mia o avete qualche domanda scrivete pure qui sotto nei commenti!