Validazione di un form

Gli argomenti di questa pagina

  • Validazione di un form: controllo campi obbligatori vuoti
  • Validazione di un form: controllo sintassi campi obbligatori
  • Validazione di un form: controllo sintassi se campo non obbligatorio valorizzato

Validazione di un form: controllo campi obbligatori vuoti

Offrendo agli utenti la possibilità di interagire col nostro sito è importante poterne controllare gli input per vari motivi:
La sicurezza del sito stesso
L'obbligatorietà di alcuni campi
Errori nell'inserimento dei dati

JavaScript offre dei metodi di controllo sui dati per verificare se sono stati riempiti in caso di campi obbligatori e/o se i campi inseriti sono corretti.
I vantaggi di usare JavaScript per validare i dati inseriti è che il controllo dei dati avviene prima che il form possa essere consegnato all'interprete PHP impedendo così di andare avanti con la registrazione o l'utilizzo dei dati inseriti.

Questo che segue è il form che sarà sempre uguale in tutti i nostri esercizi.
E' da notare che in questo form ci sono dei campi contraddistinti da un asterisco (*) ed i relativi controlli contraddistinti dalla class="si".
Questo perchè la funzione JS che abbiamo preparato si basa su questa classe per verificare se un campo è obbligatorio e quindi non deve essere lasciato vuoto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<form method="post" name="modulo" action="" onsubmit="return check_valid(this);">
<table>
<tr>
<td colspan="2">I campi indicati con (*) sono obbligatori</td>
  </tr>
  <tr>
    <td>Cognome (*)</td>
    <td><input type="text" name="cognome" class="si" /></td>
  </tr>
  <tr>
    <td>Nome </td>
    <td><input type="text" name="nome" /></td>
  </tr>
  <tr>
    <td>Data di nascita (gg/mm/aaaa) (*)</td>
    <td><input type="text" name="nascita" class="si" /></td>
  </tr>
  <tr>
    <td>Sesso</td>
    <td>
      <label><input type="radio" name="sesso" value="M" checked="checked" />M</label>
      <label><input type="radio" name="sesso" value="F" />F</label>
    </td>
  </tr>
  <tr>
    <td>Citt&agrave;</td>
    <td><input type="text" name="citta" /></td>
  </tr>
  <tr>
    <td>CAP (*)</td>
    <td><input type="text" name="cap" class="si" /></td>
  </tr>
  <tr>
    <td>Indirizzo</td>
    <td><input type="text" name="indirizzo" /></td>
  </tr>
  <tr>
    <td>Telefono (*)</td>
    <td><input type="text" name="telefono" class="si" /></td>
  </tr>
  <tr>
    <td>Email (*)</td>
    <td><input type="text" name="email" class="si" /></td>
  </tr>
  <tr>
    <td>Homepage (http://.........)</td>
    <td><input type="text" name="homepage" /></td>
  </tr>
    <tr>
    <td>Tipo servizio (*)</td>
    <td>
    <label><input type="checkbox" name="trattamento" value="1" class="si" />Solo camera</label><br />
    <label><input type="checkbox" name="trattamento" value="2" class="si" />Camera e colazione</label><br />
    <label><input type="checkbox" name="trattamento" value="3" class="si" />Mezza pensione</label><br />
    <label><input type="checkbox" name="trattamento" value="4" class="si" />Pensione completa </label>
    </td>
    </tr>
  <tr>
    <td>Homepage (http://.........)</td>
    <td><input type="text" name="homepage" /></td>
  </tr>
  <tr>
    <td>Motivo del contatto (*)</td>
    <td>
    <select name="motivo" class="si">
    <option value=''>Scegli</option>
    <option value='info'>Informazioni</option>
    <option value='richiesta_prev'>Richiesta preventivo</option>
    <option value='richiesta_saldo'>Richiesta saldo</option>
    <option value='prenotazione'>Prenotazione</option>
    <option value='orario'>Info orario ufficio</option>
    </select>
    </td>
  </tr>  
  <tr>
  <td>Commento</td>
    <td>
     <textarea name="commento" rows="5" cols="32"></textarea>
    </td>
  </tr>
  <tr>
  <td>&nbsp;</td>
    <td>
     <input type="submit" value="Invia" />
    </td>
  </tr>
</table> 
</form>

Iniziamo coi campi obbligatori. In questo primo esempio ci preoccupiamo solo che i campi obbligatori non siano vuoti. Non ci preoccuperemo che i dati inseriti abbiamo una giusta sintassi, ma questo lo vedremo nel passo seguente.

Purtroppo nel form ci sono dei controlli checkbox che ci complicano la vita già da questo passaggio.
A questi controlli non basta il codice JavaScript scritto nel primo blocco IF (righe 3 - 8), ma ncessita di codice aggiuntivo.
Questo per un semplice motivo.
Se si legge il codice HTML qui sopra stampato si noterà che ogni checkbox è valorizzato da un value (che nell'esempio va da 1 a 4).
Questo fatto farebbe passare la validazione in quanto il primo blocco di codice controlla il value dei controlli. Ma in una checkbox (come d'altra parte anche un radio) una cosa è il value altra cosa è il checked ed in questa fase di controllo è appunto importante vedere lo stato checked dei vari checkbox.
Questo codice va iniziato a partire dal commento inizio controllo per le sole checkbox al commento fine controllo per le sole checkbox ed ha bisogno di una seconda funzione che controlla lo stato dei vari checkbox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function check_valid(theForm) {
    for (i=0; i < theForm.elements.length; i++) {
        if (theForm.elements[i].value == "" && theForm.elements[i].className == "si") {
            alert (theForm.elements[i].name + ": campo vuoto non accettabile");
               theForm.elements[i].value = "";
               theForm.elements[i].focus();
               return false;
        }
        //    inizio controllo per le sole checkbox
        if (theForm.elements[i].className == "si") {
            if (theForm.elements[i].name == "trattamento") {
                if (!controllo_check()) {
                    alert("Devi selezionare almeno un servizio");
                    theForm.elements[i].focus();
                    return false;
                }                
            }
        }
        //    fine controllo per le sole checkbox
    }
}
//    per validare una serie di checkbox
function controllo_check() {
    var cks = document.forms[0].trattamento;
    var checked = false;
    for(var i = 0; i < cks.length; i++) {
        if(cks[i].checked) {
            checked = true;
            break;
        }
    }
    return checked;
}

Il form di esempio

Validazione di un form: controllo sintassi campi obbligatori

Dopo questa prima veloce validazione vediamo di approfondire una validazione anche per quanto riguarda la sintassi dei valori inseriti.
Si parte dal codice appena visto più sopra.
Prima di chiudere il ciclo FOR con la chiusura della parentesi graffa "}", si passano in rassegna i vari campi obbligatori e si invocano le relative funzioni.

1
2
3
4
5
6
7
8
9
10
11
12
13
if (theForm.elements[i].className == "si") {
    if (theForm.elements[i].name == "email") {
        var errato="";
        errato = verify_email (theForm.elements[i].value);
        if (errato != ""){
            alert(theForm.elements[i].name + ": " + errato);
            theForm.elements[i].value = "";
            theForm.elements[i].focus();
            return false;
        }
    }
    //    ............
}

Se la funzione ritorna un errore si invita l'utente a ripetere l'inserimento, in caso contrario si permette che l'utente continui con l'operazione di inserimento o invio del form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
function check_valid(theForm) {
    for (i=0; i < theForm.elements.length; i++) {
        if (theForm.elements[i].value == "" && theForm.elements[i].className == "si") {
            alert (theForm.elements[i].name + ": campo vuoto non accettabile");
               theForm.elements[i].value = "";
               theForm.elements[i].focus();
               return false;
        }
        if (theForm.elements[i].className == "si") {
            if (theForm.elements[i].name == "email") {
                var errato="";
                errato = verify_email (theForm.elements[i].value);
                if (errato != ""){
                    alert(theForm.elements[i].name + ": " + errato);
                    theForm.elements[i].value = "";
                    theForm.elements[i].focus();
                    return false;
                }
            }
            if (theForm.elements[i].name == "telefono") {
                var errato="";
                errato = ValidaCampiNumerici(theForm.elements[i].value)
                if (errato != ""){
                    alert(theForm.elements[i].name + ": " + errato);
                    theForm.elements[i].value = "";
                    theForm.elements[i].focus();
                    return false;
                }
            }
            if (theForm.elements[i].name == "nascita") {
                var errato="";
                errato = checkDate(theForm.elements[i].value)
                if (errato != ""){
                    alert(theForm.elements[i].name + ": " + errato);
                    theForm.elements[i].value = "";
                    theForm.elements[i].focus();
                    return false;
                }
            }
            if (theForm.elements[i].name == "cap") {
                var errato="";
                errato = verify_cap(theForm.elements[i].value)
                if (errato != ""){
                    alert(theForm.elements[i].name + ": " + errato);
                    theForm.elements[i].value = "";
                    theForm.elements[i].focus();
                    return false;
                }
            }
            if (theForm.elements[i].name == "trattamento") {
                if (!controllo_check()) {
                    alert("Devi selezionare almeno un servizio");
                    theForm.elements[i].focus();
                    return false;
                }                
            }
        }    //    fine della IF 
    }    //    fine ciclo FOR
}
//    Per validare l'indirizzo e-mail
function verify_email (strng) {
    var emailFilter=/^[email protected]+\..{2,3}$/;
//    var emailFilter=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/;
    var error="";
    if (strng == "") {
        error = "Occorre inserire un indirizzo E-Mail.\n";
    }
    if (!(emailFilter.test(strng))) {
        error = "Inserire un indirizzo E-Mail valido.\n";
    } else {
        var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/;
        if (strng.match(illegalChars)) {
            error = "L'indirizzo E-Mail contiene caratteri non validi.\n";
        }
    }
    return error;
}
//    per validare un numero di telefono
function ValidaCampiNumerici(string) {
    var error="";
    var numeri= "1234567890., ()/";
    var valida= string;
    var verificato = true;
    var cifre = "";
    for ( n = 0; n < valida.length; n++ ) {
        vl = valida.charAt( n );
        for ( s = 0; s < numeri.length; s++ )
            if ( vl == numeri.charAt( s ))
                break;
            if ( s == numeri.length ) {
                verificato = false;
                break;
            }
            cifre += vl;
        }
        if (!verificato) {
            error = "Presenza di caratteri non validi ( ., ()/ ).";
        }
    return error;
}
//    per validare una data
function checkDate(string){
    var checkPattern=new RegExp("\\d{2}/\\d{2}/\\d{4}");
    var errorMessage='';
    var dateValue=string;
    if(dateValue==''){
        errorMessage='Inserire una data.';
    } else if(!checkPattern.test(dateValue)){
        errorMessage='Inserire una data nel formato definito.';
    }
    return errorMessage;
}
//    per validare il cap
function verify_cap(string){
    var error="";
    if (string == "") {
        error = "Occorre inserire il CAP.\n";
    }
     if (!string.match(/^\d{5}$/)) {
        error = "Inserire 5 cifre nel campo C.A.P.";
    }
    return error;
}
//    per validare una serie di checkbox
function controllo_check() {
    var cks = document.forms[0].trattamento;
    var checked = false;
    for(var i = 0; i < cks.length; i++) {
        if(cks[i].checked) {
            checked = true;
            break;
        }
    }
    return checked;
}

Il form di esempio

Validazione di un form: controllo sintassi se campo non obbligatorio valorizzato

In questo terzo esempio cerchiamo di fare un passo avanti. Vogliamo verificare che un campo anche se non obbligatorio, sia sintatticamente corretto.
Quindi, usciti dalla IF che controlla i campi obbligatori e prima di uscire dal ciclo FOR che cicla tutti i campi del form, verifichiamo se il campo che intendiamo validare è vuoto.

1
2
3
4
5
6
7
8
9
10
11
12
13
function check_valid(theForm) {
    for (i=0; i < theForm.elements.length; i++) { 
        if (theForm.elements[i].value == "" && theForm.elements[i].className == "si") {
            if (theForm.elements[i].className == "si") {
                //    vengono esaminati i campi obbligatori                
            }
        }    // chiusura IF per campi obbligatori
        //    Qui vengono validati i campi non obbligatori solo se compilati
        if (theForm.elements[i].name == "homepage") {
            //    ....................
        }
    }    //    chiusura ciclo FOR
}

Se il campo è valorizzato, lo controlliamo, altrimenti non eseguiamo alcun controllo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
function check_valid(theForm) {
    for (i=0; i < theForm.elements.length; i++) {
        if (theForm.elements[i].value == "" && theForm.elements[i].className == "si") {
            alert (theForm.elements[i].name + ": campo vuoto non accettabile");
               theForm.elements[i].value = "";
               theForm.elements[i].focus();
               return false;
        }
        if (theForm.elements[i].className == "si") {
            if (theForm.elements[i].name == "email") {
                var errato="";
                errato = verify_email (theForm.elements[i].value);
                if (errato != ""){
                    alert(theForm.elements[i].name + ": " + errato);
                    theForm.elements[i].value = "";
                    theForm.elements[i].focus();
                    return false;
                }
            }
            if (theForm.elements[i].name == "telefono") {
                var errato="";
                errato = ValidaCampiNumerici(theForm.elements[i].value)
                if (errato != ""){
                    alert(theForm.elements[i].name + ": " + errato);
                    theForm.elements[i].value = "";
                    theForm.elements[i].focus();
                    return false;
                }
            }
            if (theForm.elements[i].name == "nascita") {
                var errato="";
                errato = checkDate(theForm.elements[i].value)
                if (errato != ""){
                    alert(theForm.elements[i].name + ": " + errato);
                    theForm.elements[i].value = "";
                    theForm.elements[i].focus();
                    return false;
                }
            }
            if (theForm.elements[i].name == "cap") {
                var errato="";
                errato = verify_cap(theForm.elements[i].value)
                if (errato != ""){
                    alert(theForm.elements[i].name + ": " + errato);
                    theForm.elements[i].value = "";
                    theForm.elements[i].focus();
                    return false;
                }
            }
            if (theForm.elements[i].name == "trattamento") {
                if (!controllo_check()) {
                    alert("Devi selezionare almeno un servizio");
                    theForm.elements[i].focus();
                    return false;
                }                
            }
        }    //    fine della IF 
            if (theForm.elements[i].name == "homepage") {
                if (theForm.elements[i].value != "") {
                    errato = is_valid_url(theForm.elements[i].value)
                    if (errato != ""){
                        alert(theForm.elements[i].name + ": " + errato);
                        theForm.elements[i].value = "";
                        theForm.elements[i].focus();
                        return false;
                    }
                }                
            }
        
    }    //    fine ciclo FOR
}
//    Per validare l'indirizzo e-mail
function verify_email (strng) {
    var emailFilter=/^[email protected]+\..{2,3}$/;
//    var emailFilter=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/;
    var error="";
    if (strng == "") {
        error = "Occorre inserire un indirizzo E-Mail.\n";
    }
    if (!(emailFilter.test(strng))) {
        error = "Inserire un indirizzo E-Mail valido.\n";
    } else {
        var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/;
        if (strng.match(illegalChars)) {
            error = "L'indirizzo E-Mail contiene caratteri non validi.\n";
        }
    }
    return error;
}
//    per validare un numero di telefono
function ValidaCampiNumerici(string) {
    var error="";
    var numeri= "1234567890., ()/";
    var valida= string;
    var verificato = true;
    var cifre = "";
    for ( n = 0; n < valida.length; n++ ) {
        vl = valida.charAt( n );
        for ( s = 0; s < numeri.length; s++ )
            if ( vl == numeri.charAt( s ))
                break;
            if ( s == numeri.length ) {
                verificato = false;
                break;
            }
            cifre += vl;
        }
        if (!verificato) {
            error = "Presenza di caratteri non validi ( ., ()/ ).";
        }
    return error;
}
//    per validare una data
function checkDate(string){
    var checkPattern=new RegExp("\\d{2}/\\d{2}/\\d{4}");
    var errorMessage='';
    var dateValue=string;
    if(dateValue==''){
        errorMessage='Inserire una data.';
    } else if(!checkPattern.test(dateValue)){
        errorMessage='Inserire una data nel formato definito.';
    }
    return errorMessage;
}
//    per validare il cap
function verify_cap(string){
    var error="";
    if (string == "") {
        error = "Occorre inserire il CAP.\n";
    }
     if (!string.match(/^\d{5}$/)) {
        error = "Inserire 5 cifre nel campo C.A.P.";
    }
    return error;
}
//    per validare un url
function is_valid_url(url) {
    var error="";
    if (!url.match(/^(ht|f)tps?:\/\/[a-z0-9-\.]+\.[a-z]{2,4}\/?([^\s<>\#%"\,\{\}\\|\\\^\[\]`]+)?$/)) {
        error = "URL inserito non valido"
    }
    return error;
}
//    per validare una serie di checkbox
function controllo_check() {
    var cks = document.forms[0].trattamento;
    var checked = false;
    for(var i = 0; i < cks.length; i++) {
        if(cks[i].checked) {
            checked = true;
            break;
        }
    }
    return checked;
}

Il solito form di esempio

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum