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, 3-4 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)

{if (alertbox) {alert(alertbox);} return false;}else {return true;}}}

dotpos=value.lastIndexOf(".");lastpos=value.length-1;if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-dotpos<2)

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 onSubmitPotresti 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 E-mail")==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 PROGRAMMASe 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 || lastpos-dotpos>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 formwith (thisform){if (emailvalidation(Email,"Illegal E-mail")==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>