La seguente pagina web mostra un form per l'immissione di dati da registrare in un data base che raccoglie, ad esempio, gli utenti autorizzati ad accedere ad un'area riservata.
I dati non verranno realmente memorizzati, perchè lo scopo del programma consiste nel verificare la correttezza dei dati, direttamente al lato del browser, prima che essi vengano inviati al server per la registrazione nel data base.
Infatti, se il controllo della correttezza dei dati venisse affidato al server, si avrebbe una inutile occupazione del canale per il reinvio dei dati e, nello stesso tempo, un inutile impegno del server per verificare la correttezza dei dati.
Il modulo di base, privo dei controlli, potrebbe essere il seguente:
<html>
<head>
<title>Registrazione Nuovo Utente</title>
</head>
<body>
<form name=moduloIns onSubmit="return convalidaCampi()">
<table align=center width=300 border=1>
<tr>
<th colspan=2 align=center>Modulo di registrazione Dati Utente:</th>
</tr><tr>
<td align=right>Nome:</td>
<td><input type=text name=nome>
</td>
</tr><tr>
<td align=right>Cognome</td><td><input type=text name=cognome></td>
</tr><tr>
<td align=right>e-mail</td><td><input type=text name=email></td>
</tr><tr>
<td align=right>data di Nascita</td><td><input type=text name=dataNasc></td>
</tr><tr>
<td align=right>Telefono</td><td><input type=text name=tlf></td>
</tr><tr>
<td align=right>User id</td><td><input type=text name=username></td>
</tr><tr>
<td align=right>Password</td><td><input type=password name=password1></td>
</tr><tr>
<td align=right>Conferma<br>Password</td><td><input type=password name=password2></td>
</tr><tr>
<td align=right>Privilegi</td><td><select name=priv>
<option value="stud" selected>Studente</option>
<option value="doc">docente</option>
<option value="admin">Amministratore</option>
</select>
</td>
</tr><tr>
<td align=center colspan=2>
<input type=submit name=submit value="Registra">
</td>
</tr>
</table>
</form>
</body>
</html>
Il form di registrazione degli utenti, prodotto dal codice html precedente, è il seguente:
Nella intestazione del tag form aggiungere il gestore di evento onsubmit ed assegnargli, come valore, il nome della funzione che deve verificare se il campo è scritto correttamente:
<body>
<form name=moduloIns onSubmit="return convalidaCampi()">
<table align=center width=300 border=1>
Nella sezione HEAD della pagina inserire uno script che, accedendo alla proprietà value di ciascun componente, si assicuri che ci sia almeno un carattere nella casella di testo.
Il nome della funzione deve essere lo stesso di quello scritto nell'attributo onsubmit, cioè convalidaCampi()
Per accedere alla casella di testo si usa il riferimento:
document.moduloIns.nome.value
Il cui significato è il seguente.:
<html>
<head>
<title>Registrazione Nuovo Utente</title>
<script>
function convalidaCampi() {
if(document.moduloIns.nome.value == "") {
alert ("Inserisci il nome.")
return false
}
return true
}
</script>
</head>
Se la casella di testo risulta vuota la funzione restituisce il valore false, se invece c'è almeno un carattere nella casella, la funzione restituisce true.
Il valore restituito dalla funzione viene assegnato al gestore di evento onsubmit. Questo procederà alla trasmissione dei dati al server se riceve true, non trasmetterà i dati al server se riceve false. In altri termini il gestore di evento interpreta il valore false come se fosse il comando "Annulla".
Prima di annullare la trasmissione dei campi al server, la funzione chiamata presenta un messaggio di avvertimento a cui l'utente deve rispondere premendo il pulsante ok.
Con controlli analoghi è semplice estendere il controllo a tutti i componenti del form:
<html>
<head>
<title>Registrazione Nuovo Utente</title>
<script>
function convalidaCampi() {
if(document.moduloIns.nome.value == "") {
alert ("Inserisci il nome.")
return false
}
if(document.moduloIns.cognome.value == "") {
alert ("Hai dimenticato di inserire il cognome.")
return false
}
if(document.moduloIns.email.value == "") {
alert ("Hai dimenticato di inserire l'indirizzo e-mail.")
return false
}
if(document.moduloIns.dataNasc.value == "") {
alert ("Inserisci la data di nascita.")
return false
}
if(document.moduloIns.tlf.value == "") {
alert ("Inserisci il numero di telefono.")
return false
}
if(document.moduloIns.username.value == "") {
alert ("Inserisci il nome utente per accedere all'area riservata.")
return false
}
if(document.moduloIns.password1.value =="") {
alert ("Inserisci la password.")
return false
}
return true
}
</script>
</head>
Sui campi "Nome" e Cognome" si potrebbero eseguire ulteriori controlli, quali ad esempio l'assenza di caratteri diversi dalle lettere dell'alfabeto, oppure, si potrebbe decidere di acquisire il testo in maiuscolo.
In alcuni casi la presenza dell'apostrofo o dello spazio nel cognome (ad esempio "De Gennaro" oppure "D'Amico") potrebbe provocare una errata visualizzazione o una mancata acquisizione del cognome.
Nella prossima sezione si proporranno alcuni possibili controlli sui campi "data di nascita", "numero di telefono" e "indirizzo e-mail".