Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
CONVALIDA DEL FORM
2
Javascript è un potente strumento per convalidare i form prima che il contenuto venga inviato.
3
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.
4
Questa pagina tratta le 4 tecniche più importanti.
5
Osserva questo form:
6
EMAIL: VALUE (0-5): VALUE (Integer, 3- 4 digits): Do not leave this field empty :
7
LA TECNICA
8
Il codice javascript per convalidare ciò che viene inserito in un form consiste in quattro funzioni diverse:
9
emailvalidation controlla se un valore si accorda alla sintassi generale di un email.
10
valuevalidation controlla se un valore è compreso in un certo intervallo.
11
digitvalidation controlla se un valore consiste in un certo numero di caratteri.
12
emptyvalidation controlla se un field è vuoto oppure no.
13
IL CODICE
14
Il programma spiegato in questa pagina consiste proprio nelle quattro funzioni elencate qui sotto:
15
emailvalidation(this,text)
16
valuevalidation(this,min, max,text,type)
17
digitvalidation(this,min, max,text,type)
18
emptyvalidation(this,text)
19
Puoi convalidare ogni field ogni volta che questo viene cambiato, oppure puoi decidere di convalidare i field tutti insieme, al momento dell' invio.
20
Nella seconda metà di questa pagina imparerai ad usare tutti e due i metodi insieme ai programmi:
21
Prima, osserviamo i diversi programmi di convalida.
22
emailvalidation(this,text)
23
controlla se un valore si accorda alla sintassi generale di un email.
24
Parametri opzionali sono: text--testo mostrato in una casella di allarme se il contenuto è illegale.
25
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 3 || lastpos-dotpos<2)
26
{if (alertbox) {alert(alertbox);} return false;} else {return true;} } } dotpos=value.lastIndexOf("."); lastpos=value.length-1; if (apos 3 || lastpos-dotpos<2)
27
digitvalidation(this,min,max,text, type)
28
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.
29
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();
30
if (smalldatatype.charAt(0)=="i") {checkvalue=parseInt(value); if (value.indexOf(".")!=-1) {checkvalue=checkvalue+1}}; } if ((parseFloat(min)==min && value.length max) || value!=checkvalue) {if (alertbox!="") {alert(alertbox);} return false;} else {return true;} } }
31
emptyvalidation(this,text)
32
Controlla se il field è vuoto. Parametri opzionali sono: text --testo per la casella di allarme se il contenuto è illegale.
33
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;} } }
34
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.
35
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".
36
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.
37
USO DEI PROGRAMMI DI CONVALIDA
38
Ci sono due modi diversi di chiamare queste funzioni.
39
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.
40
Convalida onChange: Per costringere il browser a controllare immediatamente ogni field, si aggiunge un onChange ad ognuno dei tag nel form.
41
Per esempio: se volessimo controllare se il valore di un certo field di testo ha un indirizzo email valido, inseriremmo questa sequenza:
43
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.
44
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.
45
Questa funzione dovrà allora venire richiamata da un evento onSubmit e aggiunta al tag.
46
Se la funzione si chiamasse "formvalidation()" il tag si presenterebbe così:
47
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.
48
Un programma in grado di controllare tutti i field in un form si presenta così:
49
function formvalidation(thisform) Questa funzione controlla l'intero form prima che sia inviato.
50
function formvalidation(thisform) { with (thisform) { if (emailvalidation(Email,"Illegal E- mail")==false) {Email.focus(); return false;};
51
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;}; } }
52
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.
53
Nota: La funzione chiamata formvalidation() deve essere necessariamente personalizzata per adattarsi al tuo form.
54
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)
55
{ apos=value.indexOf("@"); dotpos=value.lastIndexOf("."); lastpos=value.length-1; if (apos 3 || lastpos-dotpos<2) {if (alertbox) {alert(alertbox);} return false;} else {return true;} } }
56
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) {
57
checkvalue=parseFloat(value); if (datatype) {smalldatatype=datatype.toLowerCase(); if (smalldatatype.charAt(0)=="i") {checkvalue=parseInt(value)}; }
58
if ((parseFloat(min)==min && checkvalue max) || value!=checkvalue) {if (alertbox!="") {alert(alertbox);} return false;} else {return true;} } }
59
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) {
60
checkvalue=parseFloat(value); if (datatype) {smalldatatype=datatype.toLowerCase(); if (smalldatatype.charAt(0)=="i") {checkvalue=parseInt(value); if (value.indexOf(".")!=-1) {checkvalue=checkvalue+1}}; }
61
if ((parseFloat(min)==min && value.length max) || value!=checkvalue) {if (alertbox!="") {alert(alertbox);} return false;} else {return true;} } }
62
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) {
63
if (value==null || value=="") {if (alertbox!="") {alert(alertbox);} return false;} else {return true;} } }
64
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 E- mail")==false) {Email.focus(); return false;};
65
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;}; } }
Presentazioni simili
