EchoEcho.Com
CORSI COMPLETI

HOME CORSI JAVASCRIPT AVANZATI     
EchoEcho.Com
STRUMENTI & RISORSE
 HOME 
 
 CORSI 
 
 RISORSE 
 
 STRUMENTI 
 
 DOCUMENTAZIONE 
 
 MAPPA 
  
  CERCA QUESTO SITO

Suggerisci questo Sito a un Amico
SUGGERISCI QUESTO SITO

CONVALIDA DEL FORM

INTRODUZIONE


LA TECNICA


IL CODICE



ESEMPIO

Convalida Del Form :
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;}
}
}



valuevalidation(this,min,max,text,type)
Controlla se il contenuto è un numero in un'area limitata.
Parametri opzionali sono:
min --valore minimo consentito nel field.
max --valore massimo consentito nel field.
text --testo per la casella di allarme se il contenuto è illegale.
type --inserire "I" se sono ammessi solo i numeri interi.
function 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;}
}
}



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 richiedonothis 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 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;};
}
}


Nota:
La funzione qui sopra lavora in aggiunta alle quattro funzioni elencate all'inizio di questa pagina.
In più, la funzione deve essere personalizzata per adattarsi al tuo form.

Dovrai quindi inserire i nomi dei form field usati nel tuo form.
(Invece di "E-mail", "Value", "Digits" e "Whatever" in questo esempio).

Inoltre dovrai assegnare i nomi alle funzioni in relazione al tipo di controllo che desideri venga operato su ognuno dei form field.

(Nell'esempio, ogni field è controllato da una differente funzione. Si può anche far controllare ogni field dalla stessa funzione. Se per esempio il form ha 4 field che devono contenere un indirizzo email, si applicherà ad ogni field un "emailvalidation".)




<< PRECEDENTE
CONTINUA >>

JAVASCRIPT MENU

JAVASCRIPT FONDAMENTALI


BOTTONI ANIMATI


RIVELAZIONE DEL BROWSER


COOKIES


POPUP WINDOWS


MENU' A DISCESA


CONVALIDA DEL FORM


PROGRAMMA FRAMESET


LINK MULTIPLA




EchoEcho.Com
CORSI COMPLETI
 HOME 
 
 CORSI 
 
 RISORSE 
 
 STRUMENTI 
 
 DOCUMENTAZIONE 
 
 MAPPA 
EchoEcho.Com
STRUMENTI & RISORSE

(c) Copyright 1998-1999 NetKontoret - All Rights Reserved