09 Mag
2017
Creare Form con validazione e CAPTCHA in Joomla 3 - seconda parte
Immagine da Joomla
Nella seconda parte della serie di articoli dedicati alla creazione di form con validazione e controllo CAPTCHA si parla della validazione dati di input, cioè dell'operazione che controlla che tutti i dati siano presenti e che soddisfino certi criteri a seconda del tipo. Ad esempio, si può semplicemente verificare che i campi obbligatori siano stati compilati, senza controllare il contenuto dei campi stessi, oppure si può verificare che, oltre alla presenza dei dati necessari, questi siano aderenti a certi criteri: per esempio un campo email obbligatorio non solo deve essere presente, ma deve anche soddisfare la struttura formale di un indirizzo email.
Il primo caso si può assimiliare ad un semplice controllo sintattico ("il campo è compilato?"), il secondo caso ad un controllo sintattico e semantico ("il campo è compilato ed è un indirizzo email corretto?").
Una premessa: in un sistema moderno credo sia necessario disporre di validazione che NON richiede il preventivo submit del form; in altre parole, si evita di inviare il form per poi validare i dati nella pagina di arrivo. Questo è scomodo perchè richiede il caricamento di altra pagina o l'aggiornameto della pagina di partenza, perchè può richiedere di reinserire tutti i dati ed infine è anche poco elegante. Il sistema di validazione che propongo impedisce l'invio della pagina se i campi non soddisfano tutti i requisiti di validità definiti.
Gli strumenti per gestire un sistema di validazione di questo tipo sono diversi. Niente viete di gestire tutto tramite Javascript, oppure si può ricorrere a plugin per Bootstrap o altri. Io mi sono sempre servito di jQuery Validation Plugin, che trovo efficiente e sopratutto estremamente flessibile. Richiede la libreria jQuery, che come sappiamo è caricata automaticamente con Joomla.
Per rendere jQuery Validation Plugin disponibile nella nostra pagina Joomla è sufficiente aggiungere questo script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js" type="text/javascript"></script>
La documentazione completa del plugin si trova a questa pagina.
NOTA: forse qualcuno si chiederà che cos'è il sito cndjs.cloudflare.com; presto detto, date un'occhiata alla pagina About dello stesso. In parole povere è un repository di librerie di vario tipo ospitato su Cloudflare. E non mi dite "tutti lo sanno, perchè specificarlo?". Io credo nel detto "Ogni domanda è semplice quando si conosce la risposta", che ho sempre interpretato in modo più ampio come un suggerimento a chiedere quando non si sa una cosa.
NOTA: forse qualcuno si chiederà che cos'è il sito cndjs.cloudflare.com; presto detto, date un'occhiata alla pagina About dello stesso. In parole povere è un repository di librerie di vario tipo ospitato su Cloudflare. E non mi dite "tutti lo sanno, perchè specificarlo?". Io credo nel detto "Ogni domanda è semplice quando si conosce la risposta", che ho sempre interpretato in modo più ampio come un suggerimento a chiedere quando non si sa una cosa.
Dopo questa lunga premessa descrivo il risultato che voglio ottenere. Il nostro form deve indicare quali campi sono richiesti e che tipo di dati si aspettano quando l'utente fa clic su Invia; mi piace che evidenzi in modo "grafico" i campi compilati correttamente o meno. Quindi, sfruttando le classi CSS fornite con Bootstrap 2.3.2, fornito di serie con Joomla, andremo a mostrare un messaggio di errore di colore rosso sotto ai campi se necessario ed evidenzieremo gli stessi con testo e contorno rosso o verde per dati compilanti in modo errato o corretto.
Ecco il codice del form modificato per includere quete novità, ci sono ben poche modifiche rispetto a quello della prima parte dell'articolo - è chiaro che non è tutto qui, questa è solo la parte HTML:
<form action='#' method='post' id='form_demo'>
<fieldset>
<legend>I tuoi dati</legend>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><span class="icon-user"></span></span>
<input class="input-xxlarge" type='text' placeholder='Il tuo nome (3-15 caratteri, richiesto)' name='nome' id='nome' />
</div>
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><span class="icon-user"></span></span>
<input class="input-xxlarge" type='text' placeholder='Il tuo cognome (3-15 caratteri, richiesto)' name='cognome' id='cognome' />
</div>
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><span class="icon-plus"></span></span>
<input class="input-min" type='text' placeholder='Età (18-60, richiesto)' name='eta' id='eta' />
</div>
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><span class="icon-envelope"></span></span>
<input class="input-xxlarge" type='text' placeholder='Il tuo indirizzo email (richiesto)' name='email' id='email' />
</div>
</div>
<div class="control-group">
<div><strong>Genere</strong> (richiesto)</div>
<label class='radio inline'>
<input id='maschio' type='radio' name='sesso' value='Maschio' /> Maschio
</label>
<label class='radio inline'>
<input id='femmina' type='radio' name='sesso' value='Femmina' /> Femmina
</label>
<label for="sesso" class="error"></label> <!‐‐ riga numero 3 ‐‐>
</div>
<div class="control-group">
<div><strong>Il tuo sistema operativo</strong> (scegli almeno un sistema)</div>
<label class='checkbox inline'>
<input type='checkbox' name='os[]' id='win32' value='Windows' /> OS Windows 32/64 bit
</label>
<label class='checkbox inline'>
<input type='checkbox' name='os[]' id='linux' value='Linux' /> Linux
</label>
<label class='checkbox inline'>
<input type='checkbox' name='os[]' id='mac' value='Mac' /> Mac OS
</label>
<label for="os[]" class="error"></label> <!‐‐ riga numero 4 ‐‐>
</div>
<div class="control-group">
<textarea class="input-xxlarge" id='note' name='note' rows='5' placeholder='Altre note e richieste'></textarea>
</div>
</fieldset>
<div class="control-group text-center">
<button class="btn btn-primary" type='submit' id='invia_form'>Invia</button>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js" type="text/javascript"></script> <!‐‐ riga numero 1 ‐‐>
<script type="text/javascript" src='script/validate.js'></script> <!‐‐ riga numero 2 ‐‐>
Ci sono alcune "misteriose" righe in più; una, la numero (1) - indicata da un commento nel codice sopra - ha lo scopo evidente di caricare lo script di jQuery Validation Plugin.
Le due righe (3) e (4) - evidenziate ancora dai commenti - con i tag label senza contenuto, grazie alla presenza della classe error e dell'elemento for andranno a contenere i messaggi di errore nel caso gli input corrispondenti - sesso e os[] - siano vuoti. Rimane da spiegare la riga numero 2, che carica uno script inserito nel sito.
Infatti, perchè tutto funzioni, occorre scrivere anche un nuovo, breve script, che contiene il cosiddetto set di regole, o rules, volendo mantenere la terminologia di jQuery Validation Plugin. Le regole definiscono i criteri cui devono sottostare i dati inseriti nei campi del form. Vi sono numerosissime possibilità, date un'occhiata a questa ottima guida. Lo script nel nostro caso è davvero semplice, ecco il codice:
jQuery(document).ready(function() {
jQuery("#form_demo").validate(
{
rules:
{
nome: {
required: true,
minlength: 3,
maxlength: 15
},
cognome: {
required: true,
minlength: 3,
maxlength: 15
},
eta: {
required: true,
number: true,
range: [18,60]
},
email:
{
required: true,
email: true
},
sesso: "required",
'os[]': "required"
},
messages:
{
nome: {
required: "<div class='help-inline'>Inserisci il nome</div>",
minlength: "<div class='help-inline'>Il nome deve avere almeno 3 caratteri</div>",
maxlength: "<div class='help-inline'>Il nome deve avere al massimo 15 caratteri</div>"
},
cognome: {
required: "<div class='help-inline'>Inserisci il cognome</div>",
minlength: "<div class='help-inline'>Il cognome deve avere almeno 3 caratteri</div>",
maxlength: "<div class='help-inline'>Il cognome deve avere al massimo 15 caratteri</div>"
},
eta: {
required: "<div class='help-inline'>Incida la tua età</div>",
number: "<div class='help-inline'>L'età va indicata con un numero</div>",
range: "<div class='help-inline'>L'età deve essere compresa tra 18 e 60 anni</div>"
},
email: "<div class='help-inline'>Inserisci un indirizzo email valido</div>",
sesso: "<div class='text-error'>Seleziona sesso</div>",
'os[]': "<div class='text-error'>Seleziona uno o più sistemi operativi</div>"
},
highlight: function(element) {
if (jQuery(element).attr("name") != "os[]" && jQuery(element).attr("name") != "sesso")
jQuery(element).closest('.control-group').removeClass('success').addClass('error');
},
unhighlight: function(element){
if (jQuery(element).attr("name") != "os[]" && jQuery(element).attr("name") != "sesso")
jQuery(element).closest('.control-group').removeClass('error').addClass('success');
}
});
});
È sufficiente copiare ed incollare il codice in un editor di testo, salvare il file con nome validate.js e caricarlo in un cartella sul vostro sito; se date un'occhiata al codice HTML più sopra, la riga numero (2) è quella che carica lo script, che nell'esempio si trova in una cartella di nome script. Ovviamente potete metterlo dove preferite, si deve solo ricordare di indicare il percorso corretto.
Passiamo ora all'analisi dello script, che è piuttosto semplice. La riga
jQuery("#form_demo").validate(... applica le condizioni di validazione al form con ID form_demo; la sezione rules definisce le regole di validazione: required indica che il campo di input individuato dall'identificatore corrispondente è obbligatorio, minlength e maxlength indicano lunghezza minima e massima dei campi (si parla di testo), number indica che il relativo campo deve contenere valori numerici e range è l'intervallo di quelli consentiti. Tutto qui.La sezione messages contiene i messaggi da visualizzare in caso di errore, ciascuno associato alla violazione della rispettiva regola. Ad esempio, vi sono 3 possibili messaggi per il campo nome: errore se assente ("required"), errore se vi sono meno di 3 caratteri ("minlength") ed errore per oltre 15 caratteri ("maxlength"). Tutto molto intuitivo, non mi dilungo oltre.
Le sezioni highlight ed unhighlight applicano/rimuovono dal campo di input la classe error o success, per generare l'effetto con testo e bordo rosso o verde. La prima voce applica la classe per errore e rimuove quella per corretto, la seconda si comporta in modo opposto, ovviamente. Le condizioni if hanno lo scopo di evitare questo effetto nel caso di campi di input con casella di controllo o opzione; potete anche applicarlo volendo, a me non piace il risultato.
Di seguito vedete il risultato. Un paio di precisazioni: anche se fate clic su Invia, i dati che inserite non vengono elaborati in alcuni modo. Se non vi fidate scrivere dati fasulli. Per testare l'effetto potete fare clic su Invia inserendo dati non corretti oppure compilare un campo non completamente o in modo errato e passare ad altro campo: lo script intercetta subito l'errore ed applica le condizioni, evidenziando il campo in colore rosso e mostrando il messaggio di errore corrispondente alla violazione. Se correggete l'errore, immediatamente il campo assume colore verde ed il messaggio scompare. Provate a titolo di esempio ad inserire i caratteri "ab" nel campo Il tuo nome e premere TAB, quindi tornate nello stesso campo ed aggiungere un altro carattere.
Trovo il risultato finale elegante ed intuitivo.
Ultime osservazioni riguardo questa lunga seconda parte:
- I più attenti potrebbero notare che la sezione textarea nel form non mostra le 5 righe previste dal codice HTML ("rows='5'"). Se lo provate nel template Protostar, le presenterà regolarmente. Si tratta di una particolarità del template usato nel mio sito.
- Noterete che l'indirizzo email viene considerato valido quando ha la forma account@dominio, senza suffisi. È corretto così, come da standard (si veda questo articolo su Wikipedia). Se poi preferite che la validazione dell'email preveda il classico formato account@dominio.xxx, allora avete un'ottima occasione per modificare lo script scrivendo una regola personalizzata. Nel caso, ricordate che le espressioni regolari sono vostre amiche.
Concludo, per davvero, suggerendovi di dare un'occhiata alla documentazione di jQuery Validation Plugin ed alla già citata guida che ho suggerito prima. Vi accorgete che in quest'articolo non ho nemmeno sfiorato le potenzialità di questo plugin, che è davvero potente. La terza parte, che presto (per i miei tempi, intendo...) pubblicherò, sarà dedicata all'inserimento di CAPTCHA nel nostro form.
Tags: Joomla, Personalizzare template, Twitter Bootstrap, jQuery