Il mestiere del web designer non è facile: significa continuare a imparare cose nuove ogni giorno, confrontarsi sempre con nuove sfide. Bisogna essere un po’ grafici e un po’ programmatori, avere buon gusto ma saperlo coniugare con sani principi di usabilità, e di tanto in tanto bisogna sporcarsi le mani con il codice.
A volte questo permette di migliorare una pagina o una funzionalità, a volte può far risparmiare ore di lavoro. A volte, semplicemente, non se ne può fare a meno.
In questo articolo si è voluto offrire una guida come realizzare:
FormMail strumento per gestire moduli di contatto
Ci sono consigli tecnici con istruzioni dettagliate per risolvere problemi precisi, ma anche consigli di stile e qualche principio di usabilità. Le soluzioni tecniche sono spiegate passo dopo passo e possono essere apprese da chi sia privo di una qualsiasi infarinatura
di programmazione.
Il form da controllare
Avete creato il vostro modulino da compilare per l’utente che vuole contattarvi, e che ha più o meno l’aspetto della figura nella pagina accanto. Ora però vorreste fare in modo che quando l’utente preme INVIA venisse eseguito un controllo sui dati, per verificare se sono stati compilati bene i campi obbligatori, se l’indirizzo e-mail inserito ha senso o contiene errori, e così via. È necessario, allora, inserire una procedura di controllo in Javascript.
Ecco come.
Si supponga di avere un semplice modulo di questo tipo:
<form action=”mailto:info@noi.it”>
Nome: <input type=text name=”nome”><br>
Cognome: <input type=text name=”cognome”><br>
Email: <input type=text name=”email”><br>
Indirizzo: <input type=text name=”indirizzo”><br>
Età: <input type=text name="eta"><br>
Città: <input type=text name=”citta”><br>
Provincia: <input type=text name=”provincia”><br>
<input type=submit value=”Invia”>
Ricordate che chiedendo ai vostri utenti questo genere di dati dovete specificare, per la legge sulla privacy, come e per quale uso tratterete i dati, e spiegare le modalità per richiederne la cancellazione.
Nella parte <head> del documento HTML potete cominciare a scrivere la vostra procedura di controllo. Questa andrà inserita in un blocco Javascript con la seguente sintassi:
<script language=”Javascript”>
function controllo_form(form) {
var messaggio = ‘’;
var errore = false;
/* qui inserirete i controlli */
}
</script>
Ora dovete creare i vari controlli. Si preveda, per esempio, che il vostro modulo esiga che i campi nome, cognome ed e-mail siano obbligatori, e quindi debbano essere compilati dagli utenti. Per fare ciò inserite, dopo il commento “qui inserirete i controlli”, questa riga:
| if (form.nome.value == ‘’) { errore = true; messaggio = messaggio + ‘Non hai compilato il campo nome. ‘; } |
Questa riga verifica se il valore del campo “nome” è una stringa vuota, e in questo caso assegna “vero” alla variabile ERRORE e aggiunge un messaggio per l’utente nella variabile MESSAGGIO. Potete fare la stessa cosa con gli altri due campi, sostituendo il nome del campo “nome” con “cognome” ed “e-mail”, e correggendo allo stesso modo anche il messaggio di errore.
Ulteriori verifiche Il passo successivo è controllare la validità dell’indirizzo e-mail.
Non è possibile stabilire se un indirizzo di posta elettronica esiste oppure no; è abbastanza semplice, però, verificare che l’indirizzo inserito sia corretto. Se l’utente vuole darvi un indirizzo falso nessuno gli impedirà di farlo, ma se avrà semplicemente sbagliato a scrivere o dimenticato un pezzo, probabilmente riceverà un messaggio di errore e potrà correggere.
Sotto alle istruzioni precedenti inserite questo comando
| if (form.email.value != ‘’ && form.email.value.match(/^[a-zAZ0- 9_\-\.]+\@[a-zA-Z0-9][a-zA-Z0-9_\-\.]*\.[a-zA-Z]{2,8}$/) == null) { errore = true; messaggio = messaggio + ‘L\’indirizzo email non e\’ valido. ‘; } |
Il comando confronta l’indirizzo inserito con un’espressione regolare che descrive la sintassi di un indirizzo di posta elettronica. Verificate ora che il numero inserito nel campo ETÀ sia sensato. Per farlo, basta inserire la seguente stringa di comandi:
if (form.eta.value != '' && (form.eta.value < 1 ||
form.eta.value > 120)) { errore = true; messaggio = messaggio +
'L\'eta\' sembra improbabile. '; }
Ricordatevi di aggiornare questa funzione, nel caso in cui i progressi della scienza medica dovessero allungare molto l’aspettativa di vita… Infine, verificate il dato che deve essere inserito nel campo PROVINCIA.
Molto spesso i web designer, invece di un campo di testo, inseriscono un menu pop-up per la selezione della provincia; in questo modo ricevono un dato corretto, ma a spese dell’utente, che anziché limitarsi a digitare due tasti deve far scorrere un lunghissimo menu fino a trovare la sua provincia.
La soluzione proposta è quella di lasciare un campo inserimento testuale, magari aggiungendo un parametro per limitare a due le lettere inseribili in modo che l’utente capisca che deve scrivere solo la sigla:
<input type=text size=2 maxlength=2 name=”provincia”>
A questo punto bisogna verificare che la sigla inserita sia valida. La soluzione con il menu ha un vantaggio: l’utente può anche non conoscere la sigla della provincia. Però se sta compilando dati relativi al suo domicilio è davvero poco probabile che non ricordi la sigla della provincia nella quale vive.
Nella vostra funzione di controllo inserite la riga:
var sigle =
“AG:AL:AN:AO:AR:AP:AT:AV:BA:BL:BN:BG:BI:BO:BZ:BS:BR:CA:CL:CB:CE
:CT:CZ:CH:CO:CS:CR:KR:CN:EN:FE:FI:FG:FO:FR:GE:GO:GR:IM:IS:SP:AQ
:LT:LE:LC:LI:LO:LU:MC:MN:MS:MT:ME:MI:MO:NA:NO:NU:OR:PD:PA:PR:PV
:PG:PS:PE:PC:PI:PT:PN:PZ:PO:RG:RA:RC:RE:RI:RN:RM:RO:SA:SS:SV:SI
:SR:SO:TA:TE:TR:TO:TP:TN:TV:TS:UD:VA:VE:VB:VC:VR:VV:VI:VT”;
if (form.provincia.value != '' && sigle.indexOf(form.provincia.
value) == -1) { errore = true; messaggio = messaggio + ‘La
sigla della provincia non e\’ corretta. ‘; }
lungo elenco di sigle è necessario, e naturalmente dovrebbe essere aggiornato ogni qual volta viene creata una provincia nuova. Con questo avete esaurito i controlli. Ora, se la variabile ERRORE è ancora FALSE, significa che tutto va bene; se è TRUE, qualcosa non ha funzionato.
Ricapitolando, l’aspetto definitivo della vostra funzione di controllo è quello che compare nel listato compreso nel riquadro qui accanto. Per finire, occorre istruire il form a eseguire la procedura di controllo quando viene premuto il tasto INVIA: lo farete inserendo un parametro nel tag iniziale del form, come descritto di seguito:
if (errore) window.alert(“Non hai compilato il modulo correttamente:
“+messaggio+” Per favore, correggi.”);
return !errore;<form action=”mailto:info@noi.xx” onSubmit=”return controllo_
form(this);”>
Ricordatevi soltanto di inserire nel parametro ACTION il vostro indirizzo di e-mail corretto, oppure l’indirizzo della pagina o della cgi che deve provvedere all’elaborazione dei dati ricevuti.
Ecco come appare il lungo script, apparentemente molto criptico, relativo alle funzioni di controllo all’interno del form di cui si parla
<script language="Javascript">
function controllo_form(form) {
var messaggio = '';
var errore = false;
if (form.nome.value == '') { errore = true; messaggio = messaggio +
'Non hai compilato il campo nome. '; }
if (form.cognome.value == '') { errore = true; messaggio = messaggio
+ 'Non hai compilato il campo cognome. '; }
if (form.email.value == '') { errore = true; messaggio = messaggio +
'Non hai compilato il campo email. '; }
if (form.email.value != ‘’ && form.email.value.match(/^[a-zA-Z0-9_\-
\.]+\@[a-zA-Z0-9][a-zA-Z0-9_\-\.]*\.[a-zA-Z]{2,8}$/) == null) { errore =
true; messaggio = messaggio + 'L\'indirizzo email non e\' valido. '; }
if (form.eta.value != '' && (form.eta.value < 1 || form.eta.value > 120)) {
errore = true; messaggio = messaggio + 'L\'eta\' sembra improbabile. ';
}
var sigle =
"AG:AL:AN:AO:AR:AP:AT:AV:BA:BL:BN:BG:BI:BO:BZ:BS:BR:CA:CL
:CB:CE:CT:CZ:CH:CO:CS:CR:KR:CN:EN:FE:FI:FG:FO:FR:GE:GO:
GR:IM:IS:SP:AQ:LT:LE:LC:LI:LO:LU:MC:MN:MS:MT:ME:MI:MO:NA:N
O:NU:OR:PD:PA:PR:PV:PG:PS:PE:PC:PI:PT:PN:PZ:PO:RG:RA:RC:
RE:RI:RN:RM:RO:SA:SS:SV:SI:SR:SO:TA:TE:TR:TO:TP:TN:TV:TS:UD
:VA:VE:VB:VC:VR:VV:VI:VT";
if (form.provincia.value != '' && sigle.indexOf(form.provincia.value) == -
1) { errore = true; messaggio = messaggio + 'La sigla della provincia non
e\' corretta. '; }
if (errore) window.alert("Non hai compilato il modulo correttamente:
"+messaggio+" Per favore, correggi.");
return !errore;
}
</script>