CONVALIDA DEL
FORM
Javascript è un potente strumento
per convalidare i form prima che il
contenuto venga inviato.
Le cose più ovvie da controllare
sono la corretta sintassi di un
indirizzo email, o se i field da
considerare come valori
contengono testo, ecc.
Questa pagina tratta le 4 tecniche più
importanti.
Osserva questo form:
EMAIL:
VALUE (0-5):
VALUE (Integer, 34 digits):
Do not leave this field
empty:
LA TECNICA
Il codice javascript per convalidare ciò
che viene inserito in un form consiste in
quattro funzioni diverse:
emailvalidation
controlla se un valore si accorda
alla sintassi generale di un email.
valuevalidation
controlla se un valore è
compreso in un certo intervallo.
digitvalidation
controlla se un valore
consiste in un certo numero di
caratteri.
emptyvalidation
controlla se un field è vuoto
oppure no.
IL CODICE
Il programma spiegato in questa
pagina consiste proprio nelle
quattro funzioni elencate qui
sotto:
emailvalidation(this,text)
valuevalidation(this,min,
max,text,type)
digitvalidation(this,min,
max,text,type)
emptyvalidation(this,text)
Puoi convalidare ogni field ogni
volta che questo viene
cambiato, oppure puoi decidere
di convalidare i field tutti
insieme, al momento dell' invio.
Nella seconda metà di questa
pagina imparerai ad usare tutti
e due i metodi insieme ai
programmi:
Prima, osserviamo i diversi
programmi di convalida.
emailvalidation(this,text)
controlla se un valore si
accorda alla sintassi
generale di un email.
Parametri opzionali sono:
text--testo mostrato in una
casella di allarme se il
contenuto è illegale.
function emailvalidation(entered, alertbox)
{
// E-mail Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines
above.
with (entered)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
lastpos=value.length-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 ||
lastpos-dotpos<2)
dotpos=value.lastIndexOf(".");
lastpos=value.length-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 ||
lastpos-dotpos<2)
{if (alertbox) {alert(alertbox);} return false;}
else {return true;}
}
}
digitvalidation(this,min,max,text,
type)
controlla se un valore consiste in un
certo numero di caratteri.
Parametri opzionali sono:
min --numero minimo dei caratteri
ammessi nel field.
max --numero massimo dei caratteri
ammessi nel field.
text --testo per la casella di allarme se il
contenuto è illegale.
type --inserire "I" se sono ammessi solo
i numeri interi.
function digitvalidation(entered, min, max, alertbox,
datatype)
{
// Digit Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines
above.
with (entered)
{
checkvalue=parseFloat(value);
if (datatype)
{smalldatatype=datatype.toLowerCase();
if (smalldatatype.charAt(0)=="i")
{checkvalue=parseInt(value); if
(value.indexOf(".")!=-1)
{checkvalue=checkvalue+1}};
}
if ((parseFloat(min)==min && value.length<min) ||
(parseFloat(max)==max && value.length>max) ||
value!=checkvalue)
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}
emptyvalidation(this,text)
Controlla se il field è vuoto.
Parametri opzionali sono:
text --testo per la casella di allarme
se il contenuto è illegale.
function emptyvalidation(entered, alertbox)
{
// Emptyfield Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
with (entered)
{
if (value==null || value=="")
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}
Nota:
Tutte le funzioni richiedono this per
essere inserite come parametri.
Inserisci semplicemente la parola
"this" come parametro quando
richiami una delle funzioni. Questo
passerà il contenuto del field corrente
alla funzione.
Se non viene inserito alcun testo quando
viene dato un nome alla funzione, questa
non farà comparire alcuna casella per
avvertire la presenza di un errore.
In ogni caso, la funzione rimanderà il valore
"false".
Questa opzione viene usata quando si
opera un controllo di diversi errori nello
stesso momento. Vale a dire: quando
tutti i field vengono controllati nel
momento in cui si clicca sul bottone
d'invio.
USO DEI PROGRAMMI DI
CONVALIDA
Ci sono due modi diversi di
chiamare queste funzioni.
Uno viene usato quando si vuole
controllare immediatamente dopo avere
inserito qualcosa nel field.
L'altro viene usato quando si vogliono
controllare tutti i field
contemporaneamente, quando si clicca
sul bottone di invio.
Convalida onChange:
Per costringere il browser a
controllare immediatamente ogni
field, si aggiunge un onChange ad
ognuno dei tag <input> nel form.
Per esempio: se volessimo
controllare se il valore di un certo
field di testo ha un indirizzo email
valido, inseriremmo questa
sequenza:
<input type="text" name="Email"
size="20"
onChange="emailvalidation(this,'
The E-mail is not valid');">
Convalida onSubmit
Potresti invece preferire che il controllo
avvenga contemporaneamente per tutti i
field, al momento dell'invio.
Per fare ciò, dovresti aggiungere un evento
onSubmit al tag <form>.
Se, per esempio, avessi un form
chiamato "myform" e volessi che tutti i
field venissero controllati quando
l'utente clicca sul tasto 'invio', dovresti
allora creare una funzione in grado di
controllare tutti i field.
Questa funzione dovrà allora
venire richiamata da un evento
onSubmit e aggiunta al tag
<form>.
Se la funzione si chiamasse
"formvalidation()" il tag <form> si
presenterebbe così:
<form onsubmit="return
formvalidation(this)">
La funzione che controlla l'intero form
rimanderà un valore "vero" o "falso". Se
è vero, il form verrà inviato - se è falso,
l'invio sarà annullato.
Un programma in grado di
controllare tutti i field in un form si
presenta così:
function formvalidation(thisform)
Questa funzione controlla l'intero
form prima che sia inviato.
function formvalidation(thisform)
{
with (thisform)
{
if (emailvalidation(Email,"Illegal Email")==false) {Email.focus(); return
false;};
if (valuevalidation(Value,0,5,"Il valore DEVE
essere compreso tra 0-5")==false)
{Value.focus(); return false;};
if (digitvalidation(Digits,3,4,"DEVI inserire 3
or 4 caratteri interi","I")==false)
{Digits.focus(); return false;};
if (emptyvalidation(Whatever,"Il textfield è
vuoto")==false) {Whatever.focus(); return
false;};
}
}
L'INTERO PROGRAMMA
Se vuoi usare tutte e quattro le
sequenze di convalida e il
programma che controlla tutti i field
allo stesso tempo, copia pure
l'intero codice che troverai qui sotto.
Nota:
La funzione chiamata
formvalidation() deve essere
necessariamente personalizzata
per adattarsi al tuo form.
<script>
funzione emailvalidation(entered,
alertbox)
{
// E-mail Validation by Henrik Petersen /
NetKontoret
// Explained at
www.echoecho.com/jsforms.htm
// Please do not remove this line and the
two lines above.
with (entered)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
lastpos=value.length-1;
if (apos<1 || dotpos-apos<2 || lastposdotpos>3 || lastpos-dotpos<2)
{if (alertbox) {alert(alertbox);} return
false;}
else {return true;}
}
}
funzione valuevalidation(entered, min,
max, alertbox, datatype)
{
// Value Validation by Henrik Petersen /
NetKontoret
// Explained at
www.echoecho.com/jsforms.htm
// Please do not remove this line and the
two lines above.
with (entered)
{
checkvalue=parseFloat(value);
if (datatype)
{smalldatatype=datatype.toLowerCase();
if (smalldatatype.charAt(0)=="i")
{checkvalue=parseInt(value)};
}
if ((parseFloat(min)==min &&
checkvalue<min) ||
(parseFloat(max)==max &&
checkvalue>max) || value!=checkvalue)
{if (alertbox!="") {alert(alertbox);} return
false;}
else {return true;}
}
}
funzione digitvalidation(entered, min,
max, alertbox, datatype)
{
// Digit Validation by Henrik Petersen /
NetKontoret
// Explained at
www.echoecho.com/jsforms.htm
// Please do not remove this line and the
two lines above.
with (entered)
{
checkvalue=parseFloat(value);
if (datatype)
{smalldatatype=datatype.toLowerCase();
if (smalldatatype.charAt(0)=="i")
{checkvalue=parseInt(value); if
(value.indexOf(".")!=-1)
{checkvalue=checkvalue+1}};
}
if ((parseFloat(min)==min &&
value.length<min) ||
(parseFloat(max)==max &&
value.length>max) || value!=checkvalue)
{if (alertbox!="") {alert(alertbox);} return
false;}
else {return true;}
}
}
funzione emptyvalidation(entered,
alertbox)
{
// Emptyfield Validation by Henrik
Petersen / NetKontoret
// Explained at
www.echoecho.com/jsforms.htm
// Please do not remove this line and the
two lines above.
with (entered)
{
if (value==null || value=="")
{if (alertbox!="") {alert(alertbox);} return
false;}
else {return true;}
}
}
funzione formvalidation(thisform)
{
// This function checks the entire form
before it is submitted
// Note: This function needs to be
customized to fit your form
with (thisform)
{
if (emailvalidation(Email,"Illegal Email")==false) {Email.focus(); return
false;};
if (valuevalidation(Value,0,5,"Value MUST
be in the range 0-5")==false)
{Value.focus(); return false;};
if (digitvalidation(Digits,3,4,"You MUST
enter 3 or 4 integer digits","I")==false)
{Digits.focus(); return false;};
if (emptyvalidation(Whatever,"The
textfield is empty")==false)
{Whatever.focus(); return false;};
}
}
</script>