|
Validare i dati inseriti in un modulo di contatto
Massimo Licchelli
Nei siti web sono presenti sempre più spesso i moduli di contatto, che permettono di raccogliere i dati anagrafici degli utenti e l'eventuale messaggio di richiesta informazioni.
I vantaggi offerti da questa soluzione rispetto al tradizionale mailto sull'indirizzo e-mail sono molteplici:
- Il mailto funziona solo se il visitatore ha installato e configurato sul PC di navigazione un client mailer come Outlook, Eudora o similari; il modulo di contatto funziona in ogni caso.
- Con una semplice e-mail non si può avere nessun controllo sui dati inseriti; attraverso un modulo di contatto si può, invece, obbligare l'utente ad inserire dati personali ritenuti importanti per classificarlo e ricontattarlo (Ragione sociale, paese, telefono, ...).
- Il modulo di contatto è sicuramente più serio e professionale di un semplice link.
Molti dei moduli presenti su internet, spesso anche di grandi e prestigiose aziende, non hanno però un'adeguata gestione di validazione dei dati inseriti e consentono l'invio del modulo con dati obbligatori mancanti o non coerenti col tipo di dato richiesto (CAP alfanumerici, indirizzi e-mail senza la @, ecc...)
In questo articolo vedremo con un esempio come Javascript ci possa venire in aiuto per realizzare un modulo di contatto veramente professionale, che verrà inviato solo se tutti i dati richiesti sono stati inseriti e se hanno un formato corretto.
Cominciamo con la realizzazione del modulo di contatto:
| <form action="FormMail.asp" method="post" name="frmModulo" id="frmModulo" onSubmit="return Convalida()">
<table width="400" border="1" cellpadding="0" cellspacing="0" bgcolor="#CCCC99">
<tr>
<td>Nome e cognome*: </td>
<td><input name="txtRagioneSociale" type="text" id="txtRagioneSociale" size="34"></td>
</tr>
<tr>
<td>Indirizzo*:</td>
<td><input name="txtIndirizzo" type="text" id="txtIndirizzo" size="34"></td>
</tr>
<tr>
<td>CAP*:</td>
<td><input name="txtCAP" type="text" id="txtCAP" size="34"></td>
</tr>
<tr>
<td>Comune*:</td>
<td><input name="txtComune" type="text" id="txtCitta" size="34"></td>
</tr>
<tr>
<td>Provincia:</td>
<td><input name="txtProvincia" type="text" id="txtProvincia" size="34"></td>
</tr>
<tr>
<td>Email*:</td>
<td><input name="txtEmail" type="text" id="txtEmail" size="34"></td>
</tr>
<tr>
<td>Telefono*:</td>
<td><input name="txtTel" type="text" id="txtTel" size="34"></td>
</tr>
<tr>
<td valign="top">Messaggio:</td>
<td><textarea name="txtInfo" cols="27" rows="6" id="txtInfo"></textarea></td>
</tr>
<tr>
<td colspan="2">* Dati obbligatori </td>
</tr>
<tr align="right">
<td colspan="2"><input name="InviaModulo" type="submit" id="InviaModulo" value="Invia">
<input name="Reimposta" type="reset" id="Reimposta" value="Reimposta"></td>
</tr>
</table>
</form> |
E' importante notare gli attributi del tag form:
action="FormMail.asp" indica di inviare i dati inseriti nel form ad una pagina asp che si occuperà di costruire l'e-mail ed inviarla al destinatario. Il codice di questa pagina non sarà però trattato in questo articolo.
onSubmit="return Convalida()" indica al browser di eseguire la funzione JavaScript Convalida() e di inviare il modulo solo se tale funzione restituirà true; in caso contrario il modulo non verrà inviato.
A questo punto entriamo nel cuore dell'articolo in quanto vedremo come realizzare la funzione JavaScript Convalida() per validare i dati inseriti nel form.
Vediamo subito il codice:
| /***** FUNZIONI DI CONVALIDA DEI DATI INSERITI NEL MODULO DI CONTATTO*****
/***** Codice scritto da Massimo Licchelli per www.vbscript.it *****
function IsEmailValid(){
var EmailOk = true
var Temp = document.frmModulo.txtEmail.value;
var AtSym = Temp.indexOf('@')
var Period = Temp.lastIndexOf('.')
var Space = Temp.indexOf(' ')
var Length = Temp.length - 1
// Array is from 0 to length-1
if (Temp == "") {
return true; }
if ((AtSym < 1) ||
(Period <= AtSym+1) ||
(Period == Length ) ||
(Space != -1))
{
alert("Inserire un indirizzo E-mail valido.");
document.frmModulo.txtEmail.focus();
EmailOk = false
} return EmailOk
}
function Convalida(){
//Controlla la
valorizzazione del campo obbligatorio txtRagioneSociale
if (document.frmModulo.txtRagioneSociale.value==""){
alert("Inserire la ragione sociale o il nome e cognome");
document.frmModulo.txtRagioneSociale.focus();
return false;
}
//Controlla la valorizzazione del campo obbligatorio txtIndirizzo
if (document.frmModulo.txtIndirizzo.value==""){
alert("Inserire l'indirizzo");
document.frmModulo.txtIndirizzo.focus();
return false;
}
//Controlla la valorizzazione del campo obbligatorio txtCitta
if (document.frmModulo.txtCitta.value==""){
alert("Inserire la città o comune");
document.frmModulo.txtCitta.focus();
return false;
}
//Controlla la valorizzazione del campo obbligatorio txtCap
if (document.frmModulo.txtCap.value==""){
alert("Inserire il C.A.P. (codice di avviamento postale)");
document.frmModulo.txtCap.focus();
return false;
}
//Controlla che il CAP non abbia una lunghezza inferiore a 5 caratteri
if (document.frmModulo.txtCap.value.length < 5){
alert("Inserire almeno 5 caratteri nel campo C.A.P.");
document.frmModulo.txtCap.focus();
return (false);
}
//Controlla che il CAP non abbia una lunghezza maggiore di 5 caratteri
if (document.frmModulo.txtCap.value.length > 5){
alert("Inserire al massimo 5 caratteri nel campo C.A.P.");
document.frmModulo.txtCap.focus();
return (false);
}
//Controlla che il CAP sia composto da soli caratteri numerici
var checkOK = "0123456789";
var checkStr = document.frmModulo.txtCap.value;
var allValid = true;
for (i = 0; i < checkStr.length; i++){
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
if (!allValid)
{
alert("Inserire solo caratteri numerici nel campo C.A.P.");
document.frmModulo.txtCap.focus();
return (false);
}
//Controlla la valorizzazione del campo obbligatorio txtTelefono
if (document.frmModulo.txtTelefono.value==""){
alert("Inserire il numero di telefono");
document.frmModulo.txtTelefono.focus();
return false;
}
//Controlla che il Telefono sia composto da soli caratteri numerici e dai caratteri /, (, ),-
var checkOK = "0123456789-/-()";
var checkStr = document.frmModulo.txtTelefono.value;
var allValid = true;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
if (!allValid)
{
alert("Inserire solo cifre e \"/-()\" caratteri nel campo \"Telefono\".");
document.frmModulo.txtTelefono.focus();
return (false);
}
//Controlla la valorizzazione del campo obbligatorio txtEmail
if (document.frmModulo.txtEmail.value==""){
alert("Inserire l'e-mail");
document.frmModulo.txtEmail.focus();
return false;
}
//Richiama la funzione IsEmailValid() che controlla il formato dell'e-mail
if (IsEmailValid()==false){
return false;
}
return true;
}
|
La prima funzione IsEmailValid() verifica la validità del formato dell'e-mail, in particolare controlla la presenza della chiocciola e del punto. Questa funzione viene richiamata dalla funzione principale Convalida().
Della funzione Convalida() possiamo notare alcuni if che si occupano di controllare la presenza dei dati obbligatori. Nel caso in cui non siano stati valorizzati avvisa con l'opportuno messaggio e sposta il fuoco sulla casella relativa.
Gli altri blocchi di codice degni di nota sono quelli che si occupano di controllare la lunghezza del CAP e la presenza dei caratteri ammissibili nel CAP e nel Telefono.
In particolare la lista dei caratteri ammissibili può essere personalizzata modificando la variabile checkOK.
Le tecniche illustrate in questo articolo naturalmente possono essere usate con grande profitto per la convalida di qualsiasi form di acquisizione dati:
- Sezioni amministrative per la gestione dei contenuti di siti web
- Moduli di ricerca
- Moduli di registrazione
- ...e tutto quello che le vostre esigenze, unite alla vostra fantasia, possano partorire ;-)
Buona programmazione
Massimo Licchelli | 
