Una delle componenti che permette l'interazione fra utente e sito è il modulo per l'inserimento di dati (form), che si tratti di un modulo per l'invio di email, per la registrazione ad un servizio, di un questionario, di un guestbook, o utile per qualsiasi altra applicazione.
Lo sviluppatore di solito crea dei controlli che determinano la correttezza e la validità dei dati inseriti nei campi: per evitare scherzi, per evitare errori di persone distratte, o per "obbligare" l'utente interessato a compilare un campo.
Data la semplicità sintattica e concettuale dei linguaggi di programmazione orientati agli oggetti, che attualmente consentono lo sviluppo di sofisticati siti o applicazioni Web, è possibile creare i controlli in questione indifferentemente col linguaggio server-side che dovrà elaborare il modulo una volta soddisfatte tutte le richieste, o con un linguaggio client-side direttamente n locale.
Il mio consiglio, nonchè l'oggetto in questione, è quello di effettuare il controllo sui campi in modalità client-side utilizzando JavaScript.
Nell'articolo analizzeremo l'intero modulo HTML e lo script mentre nell'ultima pagina forniremo l'intero codice moderatamente commentato e pronto da copiare e incollare.
L'applicazione server-side
Immaginiamo di dover consentire ad un utente di aderire ad un servizio messo a disposizione dal nostro sito. Oggi come oggi i moduli con cui abbiamo maggiormente a che fare sono rappresentati dai servizi di email (registrazione di un account) e dai forum di discussione online.
Vediamo la struttura dell'operazione con una struttura server-side:
- Inviare una prima volta l'intero pacchetto di dati al server che effettuerà il controllo
- Ricevere dal server una pagina di errore che spiega cosa e come correggere
- Tornare indietro al modulo col rischio di perdere dai campi dati già inseriti e doverli reinserire
- Inviare di nuovo il pacchetto al server che, se soddisfatto, confermerà l'operazione, altrimenti...
- ...torna al punto 1!!!
Ciò vuol dire andare incontro ad un dispendio di tempo e di risorse da parte dell'utente e personalmente al secondo errore che mi viene segnalato in questo modo mi annoio e desisto!
I vantaggi di JavaScript client-side
La mia opinione è che i vantaggi derivanti dall'esecuzione del controllo direttamente in locale con JavaScript derivano dalla velocità con cui un linguaggio client-side riesce a soddisfare delle richieste. JavaScript segnala instantaneamente all'utente gli errori, impedendo di andare avanti con la registrazione dei dati, fino ad inibire l'invio dei dati al server che dovrà limitarsi solo ad elaborarli.
Per creare un esempio valido si supponga, come predetto, di realizzare un modulo di registrazione ad un forum di discussione, ovviamente il codicè sarà presentato ed analizzato in maniera tale da poter agevolmente utilizzarlo per qualsiasi applicazione.
Realizzazione del modulo HTML
Si supponga di aver bisogno di reperire dall'utente i seguenti dati, e che tutti i campi siano obbligatori:
| Campo | Tipologia |
|---|---|
| Nome | campo di testo |
| Cognome | campo di testo |
| Nickname | campo di testo |
| Password | campo di testo di tipo password |
| Conferma password | campo di testo di tipo password |
| Data di nascita | campo di testo da compilare in formato gg/mm/aaaa |
| Sesso | caselle di opzione |
| Città | campo di tipo lista |
| Indirizzo | campo di testo |
| Telefono | campo di testo numerico |
| campo di testo dal compilare in formato account@server.it | |
| Homepage | campo di testo da compilare con dicitura obbligatoria http:// |
| Firma | area di testo |
Naturalmente, in una reale applicazione, campi come Telefono, Indirizzo, Homepage, a seconda del tipo di applicazione, possono anche essere da ritenersi facoltativi, al solo fine didattico realizziamo un controllo anche su questi. In caso si voglia ritenere facoltativo un campo, basterà non includere il controllo associato ed apportare piccole modifiche alle parti di codice che lo riguardano.
Presentiamo il codice Html per la realizzazione del modulo, elegantemente formattato in una tabella:
<table>
<form method="post" name="modulo">
<tr>
<td colspan="2" align="center"><b>Registrazione al servizio<br>Tutti i campi sono obbligatori</b></td>
</tr>
<tr><td><b>Nome</b></td><td><input type="text" name="nome"></td></tr>
<tr><td><b>Cognome</b></td><td><input type="text" name="cognome"></td></tr>
<tr><td><b>Nickname</b></td><td><input type="text" name="nickname"></td></tr>
<tr><td><b>Password</b></td><td><input type="password" name="password"></td></tr>
<tr><td><b>Conferma password</b></td><td><input type="password" name="conferma"></td></tr>
<tr><td><b>Data di nascita (es: 12/04/1978)</b></td><td><input type="text" name="nascita"></td></tr>
<tr><td><b>Sesso</b></td><td>
<input type="radio" name="sesso" value="M" checked>M
<input type="radio" name="sesso" value="F">F
</td>
</tr>
<tr><td><b>Città</b></td><td>
<select name="citta">
<option>- Seleziona la tua città -</option>
<option value="Roma">Roma</option>
<option value="Milano">Milano</option>
<option value="Napoli">Napoli</option>
<option value="Firenze">Firenze</option>
<option value="Bologna">Bologna</option>
</select>
</td>
</tr>
<tr><td><b>Indirizzo</b></td><td><input type="text" name="indirizzo"></td></tr>
<tr><td><b>Telefono (senza spazi nè simboli)</b></td><td><input type="text" name="telefono"></td></tr>
<tr><td><b>Email</b></td><td><input type="text" name="email"></td></tr>
<tr><td><b>Homepage</b></td><td><input type="text" name="homepage" value="http://"></td></tr>
<tr><td colspan="2"><b>Firma</b></td></tr><tr>
<td colspan="2" align="center">
<textarea name="firma" rows="5" cols="32">Inserisci qui il tuo slogan!</textarea>
</td>
</tr>
<tr><td colspan="2" align="right"><input type="button" value="Invia" onClick="Modulo()"></td></tr>
</form>
</table>Si suppone che il lettore sia sufficientemente preparato in HTML, utilizziamo su un bottone di tipo button, non di tipo submit, la funzione Modulo() per sottoporre i dati inseriti al programma JavaScript che li validerà e, una volta soddisfatte tutte le condizioni, le invierà al file che le elaborerà (nell'esempio supponiamo che questo file sarà scritto in classic Asp e si chiami elabora_dati.asp).
Realizzazione dello script JavaScript
Lo script in esame è molto lungo, sia pur non particolarmente complesso. In questo articolo, per rendere l'analisi più fluida, analizziamo campo per campo il funzionamento dello script.
Iniziamo col controllo sui campi di testo semplice. In questo caso lo script dovrà controllare solo che non siano lasciati vuoti. Mi riferisco ai campi Nome, Cognome, Nickname, Password, Conferma password e Indirizzo. In questi casi il codice è uguale per tutti i comandi, sarà sufficiente modificare la variabile associata ai campi:
var nome = document.modulo.nome.value;
var cognome = document.modulo.cognome.value;
var nickname = document.modulo.nickname.value;
var password = document.modulo.password.value;
var conferma = document.modulo.conferma.value;
var nascita = document.modulo.nascita.value;
var citta = document.modulo.citta.options[document.modulo.citta.selectedIndex].value;
var indirizzo = document.modulo.indirizzo.value;
var telefono = document.modulo.telefono.value;
var email = document.modulo.email.value;
var homepage = document.modulo.homepage.value;
var firma = document.modulo.firma.value;Queste sono tutte le variabili associate ai campi, sono tutte uguali, meno quella del campo Città che è rappresentato da una select box che chiede di selezionare le singole opzioni dell'intero indice di scelta.
Con riferimento ai campi citati in precedenza, dato che il controllo sarà uguale per tutti, limitiamoci ad esaminare il controllo sul campo Nome:
if ((nome == "") || (nome == "undefined")) {
alert("Il campo Nome è obbligatorio.");
document.modulo.nome.focus();
return false;
}Traducendo in linguaggio umano da linguaggio JavaScript, ecco cosa abbiamo comandato al programma: "Se il campo nome è vuoto o risulta indefinito, invia un messaggio di avviso in cui comunichi che il campo in questione è obbligatorio, riposiziona il cursore di scrittura sul campo e non restituire nulla all'utente".
Tra i campi Password e Conferma password dobbiamo effettuare un controllo per assicurarci che la password confermata sia uguale a quella scelta:
if (password != conferma) {
alert("La password confermata è diversa da quella scelta, controllare.");
document.modulo.conferma.value = "";
document.modulo.conferma.focus();
return false;
}Tradotto in linguaggio umano: "Se il campo password ed il campo conferma password sono diversi, invia un messaggio di avviso che indichi di stare attenti ad inserire la stessa password per dare conferma di quella scelta, svuota il campo conferma password e riposiziona il cursore di scrittura non restituendo nulla".
Il controllo sul campo Data di nascita è il più complesso in assoluto, dobbiamo verificare che la data sia inserita in formato gg/mm/aaaa e che sia una data esistente (ad esempio non 36/18/2000) e non sia inferiore al 1900, o si rischierebbe di ricevere un tentativo di iscrizione da parte di un fantasma :-)
Esaminiamo il codice completo diviso per sezioni:
if (document.modulo.nascita.value.substring(2,3) != "/" ||
document.modulo.nascita.value.substring(5,6) != "/" ||
isNaN(document.modulo.nascita.value.substring(0,2)) ||
isNaN(document.modulo.nascita.value.substring(3,5)) ||
isNaN(document.modulo.nascita.value.substring(6,10))) {
alert("Inserire nascita in formato gg/mm/aaaa");
document.modulo.nascita.value = "";
document.modulo.nascita.focus();
return false;
} else if (document.modulo.nascita.value.substring(0,2) > 31) {
alert("Impossibile utilizzare un valore superiore a 31 per i giorni");
document.modulo.nascita.select();
return false;
} else if (document.modulo.nascita.value.substring(3,5) > 12) {
alert("Impossibile utilizzare un valore superiore a 12 per i mesi");
document.modulo.nascita.value = "";
document.modulo.nascita.focus();
return false;
} else if (document.modulo.nascita.value.substring(6,10) < 1900) {
alert("Impossibile utilizzare un valore inferiore a 1900 per l'anno");
document.modulo.nascita.value = "";
document.modulo.nascita.focus();
return false;
}Tradotto in termini umani: "Controlla che venga inserito nella giusta posizione il carattere di divisione (/) e che vengano inseriti due caratteri numerici prima del primo simbolo di divisione, due caratteri numerici tra il primo ed il secondo carattere di divisione e quattro caratteri numerici in coda".
"Controlla che il giorno non sia superiore a 31, che il mese non sia superiore a 12 e l'anno non sia inferiore a 1900. In tutti i casi di errore restituisci un messaggio di avviso che indichi di inserire una data valida o in formato corretto, seleziona quanto scritto e non restituire nulla".
Vediamo i controlli per i campi rimanenti.
Per il campo Città, per cui abbiamo utilizzato una select box, in virtù della variabile dichiarata ed esaminata in precedenza, presenta questo codice per il controllo:
if ((citta == "") || (citta == "undefined")) {
alert("Il campo Città è obbligatorio.");
document.modulo.citta.focus();
return false;
}È possibile notare che il controllo è uguale a quello effettuato per il campo Nome, l'unica differenza risiede nella variabile dichiarata, ma ho comunque ritenuto opportuno riportare il codice.
Passiamo al controllo sul campo Email, in cui verifichiamo che l'indirizzo inserito rispetti l'espressione regolare per l'email, ovvero account@server.it, per prima cosa dichiariamo una variabile in cui includiamo la stringa per il controllo dell'espressione in formato di Espressioni regolari:
var email_reg_exp = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/;Ecco il controllo:
if (!email_reg_exp.test(email) || (email == "") || (email == "undefined")) {
alert("Inserire un indirizzo email corretto.");
document.modulo.email.select();
return false;
}Tradotto in linguaggio umano: "Se il test sull'espressione regolare del campo email è negativo, o se il campo risulta vuoto o indefinito, invia un messaggio di avviso in cui indichi di inserire un indirizzo email valido, seleziona il testo scritto e non restituire nulla".
Sul campo Telefono è sufficiente aggiungere al controllo standare effettuato sulla maggior parte dei campi, ad esempio il campo Nome, la verifica che il campo, oltre a non essere vuoto o indefinito, sia numerico e non contenga simboli:
if ((isNaN(telefono)) || (telefono == "") || (telefono == "undefined")) {
alert("Il campo Telefono è numerico ed obbligatorio.");
document.modulo.telefono.value = "";
document.modulo.telefono.focus();
return false;
}I campi Homepage e Firma sono simili, l'unica differenza è concettuale, sul primo deve essere presente la dicitura http:// presente sul modulo per default, sul secondo NON deve essere presente la scritta presente per per default, analizziamoli entrambi:
if ((homepage == "") || (homepage == "undefined") || (homepage.indexOf("http://") == (-1))) {
alert("Il campo Homepage non può essere privo di http://");
document.modulo.homepage.value = "http://";
document.modulo.homepage.select();
return false;
}per il campo Homepage, mentre per il campo Firma:
if ((firma == "") || (firma == "undefined") || (firma.indexOf("Inserisci qui il tuo slogan!") != (-1))) {
alert("Il campo Firma è obbligatorio e non si può inserire la scritta predefinita.");
document.modulo.firma.focus();
return false;
}In più i controlli verificano che entrambi i campi non siano vuoti. A questo punto, soddisfatte tutte le richieste, il modulo può essere inviato al programma che lo elaborerà:
else {
document.modulo.action = "elabora_dati.asp";
document.modulo.submit();
}Per rispettare le regole di programmazione e la sintassi JavaScript, solo il primo controllo sara un if, mentre gli altri saranno degli else if e l'invio verrà fatto con un else.
Codice completo dello script fino al submit del form
Vediamo il codice completo e funzionante pronto per l'utilizzo, sulla scorta del modulo Html presentato all'inizio:
<script>
<!--
function Modulo() {
// Variabili associate ai campi del modulo
var nome = document.modulo.nome.value;
var cognome = document.modulo.cognome.value;
var nickname = document.modulo.nickname.value;
var password = document.modulo.password.value;
var conferma = document.modulo.conferma.value;
var nascita = document.modulo.nascita.value;
var citta = document.modulo.citta.options[document.modulo.citta.selectedIndex].value;
var indirizzo = document.modulo.indirizzo.value;
var telefono = document.modulo.telefono.value;
var email = document.modulo.email.value;
var homepage = document.modulo.homepage.value;
var firma = document.modulo.firma.value;
// Espressione regolare dell'email
var email_reg_exp = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/;
//Effettua il controllo sul campo NOME
if ((nome == "") || (nome == "undefined")) {
alert("Il campo Nome è obbligatorio.");
document.modulo.nome.focus();
return false;
}
//Effettua il controllo sul campo COGNOME
else if ((cognome == "") || (cognome == "undefined")) {
alert("Il campo Cognome è obbligatorio.");
document.modulo.cognome.focus();
return false;
}
//Effettua il controllo sul campo NICKNAME
else if ((nickname == "") || (nickname == "undefined")) {
alert("Il campo Nickname è obbligatorio.");
document.modulo.nickname.focus();
return false;
}
//Effettua il controllo sul campo PASSWORD
else if ((password == "") || (password == "undefined")) {
alert("Il campo Password è obbligatorio.");
document.modulo.password.focus();
return false;
}
//Effettua il controllo sul campo CONFERMA PASSWORD
else if ((conferma == "") || (conferma == "undefined")) {
alert("Il campo Conferma password è obbligatorio.");
document.modulo.conferma.focus();
return false;
}
//Verifica l'uguaglianza tra i campi PASSWORD e CONFERMA PASSWORD
else if (password != conferma) {
alert("La password confermata è diversa da quella scelta, controllare.");
document.modulo.conferma.value = "";
document.modulo.conferma.focus();
return false;
}
//Effettua il controllo sul campo DATA DI NASCITA
else if (document.modulo.nascita.value.substring(2,3) != "/" ||
document.modulo.nascita.value.substring(5,6) != "/" ||
isNaN(document.modulo.nascita.value.substring(0,2)) ||
isNaN(document.modulo.nascita.value.substring(3,5)) ||
isNaN(document.modulo.nascita.value.substring(6,10))) {
alert("Inserire nascita in formato gg/mm/aaaa");
document.modulo.nascita.value = "";
document.modulo.nascita.focus();
return false;
}
else if (document.modulo.nascita.value.substring(0,2) > 31) {
alert("Impossibile utilizzare un valore superiore a 31 per i giorni");
document.modulo.nascita.select();
return false;
}
else if (document.modulo.nascita.value.substring(3,5) > 12) {
alert("Impossibile utilizzare un valore superiore a 12 per i mesi");
document.modulo.nascita.value = "";
document.modulo.nascita.focus();
return false;
}
else if (document.modulo.nascita.value.substring(6,10) < 1900) {
alert("Impossibile utilizzare un valore inferiore a 1900 per l'anno");
document.modulo.nascita.value = "";
document.modulo.nascita.focus();
return false;
}
//Effettua il controllo sul campo CITTA'
else if ((citta == "") || (citta == "undefined")) {
alert("Il campo Città è obbligatorio.");
document.modulo.citta.focus();
return false;
}
//Effettua il controllo sul campo INDIRIZZO
else if ((indirizzo == "") || (indirizzo == "undefined")) {
alert("Il campo Indirizzo è obbligatorio.");
document.modulo.indirizzo.focus();
return false;
}
//Effettua il controllo sul campo TELEFONO
else if ((isNaN(telefono)) || (telefono == "") || (telefono == "undefined")) {
alert("Il campo Telefono è numerico ed obbligatorio.");
document.modulo.telefono.value = "";
document.modulo.telefono.focus();
return false;
}
else if (!email_reg_exp.test(email) || (email == "") || (email == "undefined")) {
alert("Inserire un indirizzo email corretto.");
document.modulo.email.select();
return false;
}
//Effettua il controllo sul campo HOMEPAGE
else if ((homepage == "") || (homepage == "undefined") || (homepage.indexOf("http://") == (-1))) {
alert("Il campo Homepage non può essere privo di http://");
document.modulo.homepage.value = "http://";
document.modulo.homepage.select();
return false;
}
//Effettua il controllo sul campo FIRMA
else if ((firma == "") || (firma == "undefined") || (firma.indexOf("Inserisci qui il tuo slogan!") != (-1))) {
alert("Il campo Firma è obbligatorio e non si può inserire la scritta predefinita.");
document.modulo.firma.focus();
return false;
}
//INVIA IL MODULO
else {
document.modulo.action = "elabora_dati.asp";
document.modulo.submit();
}
}
//-->
</script>Ribadisco la modalità di utilizzo dello script, è sufficiente modificare il campi ed i relativi nomi del modulo Html e le variabili associate, eliminare controlli per campi che si desidera siano facoltativi, o eventualmente aggiungere i campi desiderati.
