Utilizzare JavaScript con i web form
annuncio pubblicitario
Capitolo 14
Utilizzare JavaScript con i web form
Dopo aver letto questo capitolo, sarete in grado di:
n
Comprendere come convalidare l’input su un a web form utilizzando JavaScript.
n
Lavorare con pulsanti di opzione, caselle di selezione e caselle di controllo, per ottenere i loro valori e impostare il loro stato.
n
Fornisce un feedback basato sulla convalida, sia tramite una finestra di dialogo alert()
sia all’interno del documento.
n
Comprendere i limiti della convalida dei form di JavaScript e riconoscere una convalida non riuscita.
JavaScript e i web form
JavaScript viene utilizzato con i web form da molto tempo, tipicamente per verificare velocemente che un utente abbia riempito correttamente i campi di un form prima di inviare il
form al server, un processo chiamato convalida lato-client. Prima di JavaScript un browser
doveva inviare il form e il suo contenuto al server per assicurarsi che tutti i campi richiesti
fossero riempiti, un processo chiamato convalida lato-server.
Importante Quando si utilizza JavaScript, occorre eseguire la convalida lato-server, nel caso
un utente abbia disattivato JavaScript o stia facendo qualcosa di malevolo di proposito.
Ricordate la funzione alert() che abbiamo esaminato nei capitoli precedenti, utilizzata per
illustrare semplici esempi? È tornata. La funzione alert() è spesso utilizzata per fornire feedback all’utente durante la convalida dei form, sebbene tecniche più recenti utilizzino il
Document Object Model (DOM) per visualizzare un feedback più amichevole.
Una pagina web con un form di base potrebbe essere simile a quella nella figura 14.1.
275
276
Parte III Integrare JavaScript nella progettazione
Figura 14.1 Un web form di base.
Quando un utente invia questo form, il codice JavaScript in background controlla che la casella di testo Name sia stata riempita. Quando è riempita correttamente, per esempio con il
nome “Steve”, la pagina mostra il nome inserito, come nella figura 14.2.
Figura 14.2 Quando il web form è riempito correttamente, il contenuto della casella di testo Name è mo-
strato in un saluto.
Se un utente non inserisce dati nella casella di testo Name, lo script mostra una finestra di
dialogo alert() indicante che il campo è richiesto, come si vede nella figura 14.3.
Figura 14.3 Il form mostra un avviso quando la casella di testo Name è vuota.
Capitolo 14 Utilizzare JavaScript con i web form
277
Il codice che fa tutto questo è riportato di seguito. Potete trovare questo codice in formvalid.htm fra i file di esempio. Il file include l’Hypertext Markup Language (HTML) che segue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>A Basic Example</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
function formValid(eventObj) {
if (document.forms[0].textname.value.length == 0) {
alert("Name is required.");
if (eventObj.preventDefault) {
eventObj.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
} else {
alert("Hello " + document.forms[0].textname.value);
return true;
}
}
</script>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var formEl = document.getElementsByTagName("form")[0];
EHandler.add(formEl,"submit", function(eventObj) { formValid(eventObj); } );
</script>
</form>
</body>
</html>
Il JavaScript all’interno dell’elemento <head> prima si collega allo script di gestione evento
ehandler.js, che è stato sviluppato nel capitolo 11, “Gli eventi di JavaScript e il browser”.
Quindi definisce una funzione chiamata formValid() per elaborare l’input del semplice form,
come mostrato nel seguente codice:
function formValid(eventObj) {
if (document.forms[0].textname.value.length == 0) {
alert("Name is required.");
if (eventObj.preventDefault) {
eventObj.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
278
Parte III Integrare JavaScript nella progettazione
} else {
alert("Hello " + document.forms[0].textname.value);
return true;
}
}
All’interno della funzione formValid() un test condizionale if utilizza l’array document.
forms[]. Esaminando il primo valore indice (0) di quell’array, il codice trova l’unico form su
questa pagina web. Il condizionale testa se la lunghezza della proprietà textname.value sul
form è 0. Se è così, lo script indica l’errore utilizzando una finestra di dialogo alert(). In caso
contrario mostra la proprietà textname.value.
Il valore restituito è importante. Quando i gestori di evento submit o click sono chiamati e
restituiscono false, il browser arresta il processo di invio del form. Questo è il motivo per cui
restituire false è importante quando la convalida fallisce. Se non viene restituito false, l’azione predefinita è continuare e inviare il form. Potete arrestare l’azione predefinita in molti
browser chiamando il metodo preventDefault(). Il metodo preventDefault() tuttavia non è
disponibile nelle versioni di Windows Internet Explorer precedenti la 9, perciò lo script esegue un test condizionale per vedere prima di tutto se il metodo preventDefault() è disponibile. Se è così, lo script chiama preventDefault(), altrimenti imposta la proprietà returnValue
dell’oggetto window.event su false per tenere conto di Internet Explorer.
La porzione successiva di JavaScript, che appare nell’elemento HTML <body>, aggiunge
l’evento submit al form utilizzando lo script di gestione evento EHandler:
var formEl = document.getElementsByTagName("form")[0];
EHandler.add(formEl,"submit", function(eventObj) { formValid(eventObj); } );
Notate che per recuperare il form, la funzione formValid() utilizza il primo valore indice
dell’elenco document.forms[], mentre la definizione var formEl utilizza il metodo getElementsByTagName. Entrambi questi approcci funzionano bene quando un solo form è presente sulla pagina. Vedrete anche di frequente script che accedono al form tramite il suo
nome, come mostrato nella sezione successiva.
Ottenere i dati dei form
Per poter fornire un feedback basato sui dati del form, dovete accedere a esso. L’esempio
precedente mostra come accedere ai dati del form utilizzando l’array document.forms[] e la
funzione getElementsByTagName. Questa sezione illustra un modo differente per eseguire
la stessa operazione, utilizzando la proprietà name del form anziché il suo indice.
Come per altri elementi di una pagina HTML, potete impostare l’attributo id per un elemento form. Ecco l’esempio precedente con un attributo id:
<form action="#" name="testform">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
</form>
Capitolo 14 Utilizzare JavaScript con i web form
279
Potete quindi accedere al form utilizzando il suo name anziché il suo indice, come segue:
document.forms["testform"]
Utilizzare name è utile perché in alcuni casi potreste non conoscere il valore indice del form
a cui volete accedere, il che a volte accade quando il codice lato-server o lato-client crea
un form dinamicamente e dovete individuare (o meglio indovinare) il valore indice del particolare form di cui avete bisogno nel documento. Il modo più coerente per assicuravi di
riuscire a ottenere un riferimento al valore indice è impostare l’id del form e poi accedervi
tramite quell’id. Potete anche accedere al form direttamente in un modo non standard, attraverso l’oggetto document, ma lo sconsiglio:
document.testform
Questo approccio diretto non funziona in modo coerente sui vari browser, e in ogni caso
non richiede molto più sforzo digitarlo correttamente, come segue:
document.forms["testform"]
Lavorare con le informazioni dei form
Potete accedere a tutti i singoli elementi dei web form tramite il DOM. Il metodo esatto per
accedere a ogni elemento differisce a seconda del tipo di elemento. Per le caselle di testo e
le caselle di selezione (chiamate anche a discesa), la proprietà value contiene il testo che il
visitatore digita o seleziona. Utilizzerete un approccio in parte diverso da value per determinare lo stato dei pulsanti di opzione e delle caselle di controllo, come vedremo fra breve.
Lavorare con le caselle di selezione
Una casella di selezione contiene gruppi di opzioni. Ecco un esempio di HTML utilizzato per
creare una casella di selezione (potete trovare questo codice anche in selectbox.txt fra i file
di esempio).
<form id="starform" action="">
Select A Constellation:
<select name="startype" id="starselect">
<option selected="selected"> </option>
<option value="Aquila">Aquila</option>
<option value="Centaurus">Centaurus</option>
<option value="Canis Major">Canis Major</option>
<option value="Canis Minor">Canis Minor</option>
<option value="Corona Borealis">Corona Borealis</option>
<option value="Crux">Crux</option>
<option value="Cygnus">Cygnus</option>
<option value="Gemini">Gemini</option>
<option value="Lyra">Lyra</option>
<option value="Orion">Orion</option>
<option value="Taurus">Taurus</option>
280
Parte III Integrare JavaScript nella progettazione
<option value="Ursa Major">Ursa Major</option>
<option value="Ursa Minor">Ursa Minor</option>
</select>
</form>
Questo codice genera una casella di selezione come quella mostrata nella figura 14.4.
Figura 14.4 Una casella di selezione basata sull’esempio di HTML.
Quando un utente seleziona un’opzione, la proprietà value della casella di selezione è impostata al valore della particolare opzione scelta. Per questo esempio la casella di selezione
denominata startype contiene nella sua proprietà value ciò che il visitatore seleziona. Potete
accedere a questa proprietà come segue:
document.forms["starform"].startype.value
Per questo particolare esempio dovete collegare un gestore di evento all’evento change
della casella di selezione, cosa che potete fare con l’aiuto dello script di gestione evento
EHander sviluppato nel capitolo 11. L’evento change attiva una funzione ogni volta che la
selezione nella casella di selezione cambia, come quando l’utente seleziona un’opzione utilizzando il menu a discesa. La pagina associa l’evento change alla casella <select> con l’aiuto del codice nel listato 14.1, che è aggiunto nella sezione <body> della pagina web.
Nota Non dimenticate di aggiungere il collegamento allo script EHandler nell’elemento
<head>. Consultate il capitolo 11 per ulteriori informazioni.
Capitolo 14
Utilizzare JavaScript con i web form
281
LISTaTO14.1 Associare un evento change a un elemento <select> utilizzando lo script EHandler creato nel
capitolo 11.
<script type="text/javascript">
var selEl = document.getElementById("starselect");
EHandler.add(selEl,"change", function() { displayValue();
</script>
} );
Questo codice utilizza il metodo Ehandler.add() per aggiungere una funzione all’evento
change dell’elemento <select>, che il codice poi recupera tramite l’ID dell’elemento <select>, ovvero starselect. In questo caso la funzione aggiunta all’evento change è una funzione definita dall’utente chiamata displayValue(), mostrata nel listato 14.2.
LISTaTO14.2 La funzione chiamata quando l’evento change del form è attivato.
function displayValue(){
var selected = document.forms["starform"].startype.value;
alert("You selected " + selected);
}
Questa piccola porzione di JavaScript si limita a mostrare il valore selezionato nel menu a
discesa. Scegliendo per esempio Ursa Minor nel menu a discesa, compare la finestra di dialogo alert() mostrata nella figura 14.5.
FIgura14.5 Scelta di una costellazione in un form e invio di una finestra di dialogo alert().
Nota Potete trovare questo codice completo in sel.htm fra i file di esempio, nella cartella
Chapter14.
L’HTML per la casella di selezione include un attributo denominato selected, che indica quale opzione è mostrata. L’esempio seleziona un’opzione vuota in modo che il valore iniziale
della casella di selezione sia vuoto:
<option selected="selected"> </option>
282
Parte III Integrare JavaScript nella progettazione
È anche possibile selezionare un’opzione utilizzando JavaScript e il DOM. Selezionare opzioni da programma è comune sui form che hanno più input, dove una scelta causa automaticamente la selezione di altre opzioni.
Nell’esercizio seguente creerete un web form che un produttore di pizza potrebbe utilizzare per prendere gli ordini. Il produttore offre soltanto alcune pizze speciali: una con verdure, una con carne e una in stile hawaiano con prosciutto e ananas. La società vorrebbe una
pagina web con tre pulsanti per aiutare i pizzaioli a tenere traccia dei tipi di pizza ordinati. I
pulsanti preselezionano i principali condimenti della pizza.
Selezionare un’opzione con JavaScript
1. Utilizzando Microsoft Visual Studio, Eclipse o un altro editor, modificate il file pizza.
htm nella cartella Chapter14 dei file di esempio.
2. Nella pagina aggiungete il codice riportato di seguito in grassetto (potete trovare
questo codice inpizza.txt fra i file di esempio):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pizza</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
function flip(pizzatype) {
if (pizzatype.value == "Veggie Special") {
document.forms["pizzaform"].topping.value = "veggies";
} else if (pizzatype.value == "Meat Special") {
document.forms["pizzaform"].topping.value = "meat";
} else if (pizzatype.value == "Hawaiian") {
document.forms["pizzaform"].topping.value = "hampineapple";
}
}
</script>
</head>
<body>
<form id="pizzaform" action="#">
<p>
<input id="vegbutton" type="button" name="veggiespecial" value="Veggie Special">
<input id="meatbutton" type="button" name="meatspecial" value="Meat Special">
<input id="hawbutton" type="button" name="hawaiian" value="Hawaiian">
</p>
Main Topping: <select name="topping">
<option value="cheese" selected="selected">Cheese</option>
<option value="veggies">Veggies</option>
<option value="meat">Meat</option>
<option value="hampineapple">Ham & Pineapples</option>
</select>
</form>
<script type="text/javascript">
Capitolo 14 Utilizzare JavaScript con i web form
283
var vegEl = document.getElementById("vegbutton");
var meatEl = document.getElementById("meatbutton");
var hawEl = document.getElementById("hawbutton");
EHandler.add(vegEl,"click",function() { flip(vegEl); });
EHandler.add(meatEl,"click",function() { flip(meatEl); });
EHandler.add(hawEl,"click",function() { flip(hawEl); });
</script>
</body>
</html>
3. Visualizzate la pagina in un browser web. Dovreste vedere una pagina come questa:
4. Scegliete uno dei pulsanti (notate che la casella di selezione per Main Topping cambia
in base alla selezione).
Il cuore dell’esempio è la funzione flip():
function flip(pizzatype) {
if (pizzatype.value == "Veggie Special") {
document.forms["pizzaform"].topping.value
} else if (pizzatype.value == "Meat Special")
document.forms["pizzaform"].topping.value
} else if (pizzatype.value == "Hawaiian") {
document.forms["pizzaform"].topping.value
}
}
= "veggies";
{
= "meat";
= "hampineapple";
Questa funzione esamina il valore della variabile pizzatype che viene passato alla funzione
quindi, utilizzando il condizionale, cambia di conseguenza il valore della casella di selezione
chiamata topping.
Anche questa volta lo script nella porzione <head> della pagina è collegato allo script di
gestione evento EHandler e utilizza il suo metodo EHandler.add per associare gli eventi
click ai pulsanti, esattamente come il codice che avete visto in questo e nei precedenti tre
capitoli.
var vegEl = document.getElementById("vegbutton");
var meatEl = document.getElementById("meatbutton");
var hawEl = document.getElementById("hawbutton");
284
Parte III Integrare JavaScript nella progettazione
EHandler.add(vegEl,"click",function() { flip(vegEl); });
EHandler.add(meatEl,"click",function() { flip(meatEl); });
EHandler.add(hawEl,"click",function() { flip(hawEl); });
Questo esempio ha dimostrato come ottenere informazioni da un form e come impostare
informazioni in un form. Il form ora non è molto attraente e le pizze offerte sono poche,
tuttavia il nostro produttore ha sempre più successo, perciò negli esempi successivi di questo capitolo espanderemo il form.
Lavorare con le caselle di controllo
Nell’esempio precedente abbiamo visto le caselle di selezione, e in precedenza in questo
capitolo le caselle di testo. Esiste un altro tipo di caselle che permette agli utenti di selezionare più voci: sono le caselle di selezione. Lo scenario dell’ordinazione delle pozze introdotto nella sezione precedente è un utile esempio per illustrare le caselle di controllo.
Ricordate che, nel sistema di ordinazione pizze iniziale, quando veniva selezionato uno dei
tre tipi di pizza, la casella di selezione “Main Topping” cambiava per riflettere l’ingrediente
principale. Sarebbe utile introdurre una maggiore flessibilità, come più tipi di pizza.
La figura 14.6 mostra un nuovo form per la scelta degli ingredienti. Ore è possibile selezionare molti condimenti in una varietà di combinazioni.
Figura 14.6 Il form di ordinazione modificato con l’aggiunta di caselle di controllo.
Capitolo 14
Utilizzare JavaScript con i web form
285
Selezionando i vari ingredienti e facendo clic sul pulsante Prep Pizza compaiono sullo
schermo i condimenti selezionati, come nella figura 14.7.
FIgura14.7 Ordinazione di una pizza con il nuovo form e aggiunta di elementi tramite il DOM.
Il codice per questa funzionalità è riportato nel listato 14.3 (potete trovare questo codice in
listing14-3.htm fra i file di esempio).
LISTaTO14.3 Utilizzare caselle di controllo con il form di ordinazione.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pizza</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
function prepza() {
var checkboxes = document.forms["pizzaform"].toppingcheck.length;
var newelement = document.createElement("p");
newelement.setAttribute("id","orderheading");
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode("This pizza will have:"));
for (var i = 0; i < checkboxes; i++) {
if (document.forms["pizzaform"].toppingcheck[i].checked) {
286
Parte III
Integrare JavaScript nella progettazione
var newelement = document.createElement("p");
newelement.setAttribute("id","newelement" + i);
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode(
document.forms["pizzaform"].toppingcheck[i].value));
}
}
}
</script>
</head>
<body>
<form id="pizzaform" action="#">
<p>Toppings:</p>
<input type="checkbox" id="topping1" value="Sausage"
name="toppingcheck">Sausage<br>
<input type="checkbox" id="topping2" value="Pepperoni"
name="toppingcheck">Pepperoni<br>
<input type="checkbox" id="topping3" value="Ham"
name="toppingcheck">Ham<br>
<input type="checkbox" id="topping4" value="Green Peppers"
name="toppingcheck">Green Peppers<br>
<input type="checkbox" id="topping5" value="Mushrooms"
name="toppingcheck">Mushrooms<br>
<input type="checkbox" id="topping6" value="Onions"
name="toppingcheck">Onions<br>
<input type="checkbox" id="topping7" value="Pineapple"
name="toppingcheck">Pineapple<br>
<p><input type="button" id="prepBtn" name="prepBtn" value="Prep Pizza"></p>
</form>
<script type="text/javascript">
var prepBtn = document.getElementById("prepBtn");
EHandler.add(prepBtn,"click",function() { prepza(); });
</script>
</body>
</html>
Il cuore della pagina è la funzione prepza(), che inizia raccogliendo il numero di caselle di
controllo contenuto nel form pizzaform. Queste sono raggruppate utilizzando l’attributo
name toppingcheck, come segue:
var checkboxes = document.forms["pizzaform"].toppingcheck.length;
Dopo aver impostato un elemento <p> con un’intestazione, lo script utilizza un loop for per
ciclare sulle caselle di controllo. Ogni casella di controllo viene esaminata per vedere se la
sua proprietà checked è impostata:
if (document.forms["pizzaform"].toppingcheck[i].checked) {
Capitolo 14 Utilizzare JavaScript con i web form
287
Se la proprietà checked della casella di controllo è stata impostata, lo script crea un nuovo
elemento <p> e lo inserisce nel documento. Il risultato è la pagina che avete visto nella figura 14.7 (avete visto esempi di come creare e accodare elementi nel capitolo 10, “Il
Document Object Model”).
Tenete a mente questo esempio, perché in uno degli esercizi alla fine del capitolo vi chiederò di combinarlo con funzionalità che selezionano automaticamente gli ingredienti
quando un utente preme un pulsante, come nell’esempio della casella di selezione visto in
precedenza.
Il pulsante Prep Pizza ha un evento click associato tramite il metodo EHandler.add() del capitolo 11.
Lavorare con i pulsanti di opzione
Anche i pulsanti di opzione creano un gruppo di opzioni, ma a differenza delle caselle di
controllo un solo pulsante di opzione può essere selezionato in un determinato momento.
Nel contesto del nostro produttore di pizze, i clienti potrebbero utilizzare un pulsante di
opzione per selezionare il tipo di pasta: sottile, spessa o normale. Poiché una pizza può
avere un solo tipo di pasta, i pulsanti di opzione sono uno strumento adeguato per questa
selezione. Aggiungendo pulsanti di opzione per la selezione del tipo di pasta, si ottiene una
pagine simile a quella nella figura 14.8.
Figura 14.8 Aggiungere pulsanti di opzione per la selezione del tipo di pasta.
288
Parte III Integrare JavaScript nella progettazione
L’HTML che aggiunge questi pulsanti di opzione e una semplice tabella per contenerli si
presenta come segue (potete trovare questo codice anche in radiobuttonhtml.txt fra i file di
esempio):
<table>
<tr><td>Toppings</td><td>Crust</td></tr>
<tr>
<td><input type="checkbox" id="topping1" value="Sausage"
name="toppingcheck">Sausage</td>
<td><input type="radio" name="crust" value="Regular"
checked="checked" id="radio1">Regular</td>
</tr>
<tr>
<td><input type="checkbox" id="topping2" value="Pepperoni"
name="toppingcheck">Pepperoni</td>
<td><input type="radio" name="crust" value="Deep Dish"
id="radio2" />Deep Dish</td>
</tr>
<tr>
<td><input type="checkbox" id="topping3" value="Ham"
name="toppingcheck">Ham</td>
<td><input type="radio" name="crust" value="Thin" id="radio3">Thin</td>
</tr>
<tr>
<td><input type="checkbox" id="topping4" value="Green Peppers"
name="toppingcheck">Green Peppers</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" id="topping5" value="Mushrooms"
name="toppingcheck">Mushrooms</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" id="topping6" value="Onions"
name="toppingcheck">Onions</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" id="topping7" value="Pineapple"
name="toppingcheck">Pineapple</td>
<td></td>
</tr>
</table>
Il codice che elabora i pulsanti di opzione è simile a quello che abbiamo visto per le caselle
di controllo. La differenza principale è che i pulsanti di opzione condividono lo stesso nome
e raggruppamento logico, ovvero sono raggruppati insieme e uno soltanto può essere selezionato in un determinato momento. Il codice per elaborare i pulsanti di opzione è aggiunto alla funzione prepza(), come segue (potete trovare questo codice anche in radiobuttonjs.
txt fra i file di esempio):
Capitolo 14 Utilizzare JavaScript con i web form
289
var crusttype = document.forms["pizzaform"].crust;
var crustlength = crusttype.length;
for (var c = 0; c < crustlength; c++) {
if (crusttype[c].checked) {
var newelement = document.createElement("p");
newelement.setAttribute("id","crustelement" + i);
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode(crusttype[c].value + " Crust"));
}
}
Preconvalidare i dati dei form
JavaScript è utilizzato di frequente per confermare che un dato campo di un form sia riempito correttamente. Avete visto un esempio di questo comportamento in precedenza in
questo capitolo, nel form che chiedeva di inserire un nome. Se non si inseriva nulla nel campo, appariva un avviso di errore. JavaScript esegue adeguatamente la preconvalida dei dati
per assicurare un input valido, ed è invece carente nell’effettiva convalida dei dati diretti al
server.
Non dovreste mai, in nessun caso, presupporre che ciò che arriva al server sia valido.
Sono moltissimi gli sviluppatori web che ho sentito affermare: “Abbiamo una convalida
JavaScript sui dati, perciò non dobbiamo controllarli sul server”. Questo non potrebbe
essere più lontano dal vero. Le persone possono avere e in effetti hanno JavaScript disattivato nei loro browser; e possono anche inviare dati con formattazione POST o GET al
programma lato-server senza dover seguire la navigazione dettata dall’interfaccia browser.
Indipendentemente da quanti trucchi lato-client impieghiate, sono solo trucchi. Qualcuno
troverà il modo per eluderli.
In conclusione, potete e dovreste utilizzare JavaScript per la preconvalida. La preconvalida è
un piccolo controllo che può essere utile per fornire un veloce feedback agli utenti quando
il codice nota qualcosa di sbagliato nell’input. Tuttavia dovete eseguire l’effettiva convalida di tutto l’input sul lato server, dopo che gli utenti hanno inviato completamente il loro
input.
Questa sezione presenta alcuni modi in cui utilizzare JavaScript per la preconvalida, ma
come sfondo a questa trattazione illustrerò prima di tutto i pericoli insiti nell’utilizzare
JavaScript come unico metodo di convalida per il sito.
Hacking della convalida JavaScript
In questa sezione utilizziamo un programma lato-server per creare un sistema di ordinazione da catalogo composto di tre semplici elementi: un prodotto, una quantità e un prezzo.
Gli articoli in vendita sono fili d’erba del mio prato. Abbiamo avuto un’estate molto secca,
perciò i prati sono una rarità in questo momento. Essendo i fili d’erba del mio prato così
rari, è possibile ordinarne solo tre per famiglia, e il prezzo è elevato. Limito la quantità ordinabile utilizzando codice JavaScript.
290
Parte III Integrare JavaScript nella progettazione
Ho creato una pagina per vendere i fili d’erba che, visualizzata nel browser, si presenta
come nella figura 14.9.
Figura 14.9 Un piccolo form per l’ordinazione su catalogo.
Segue l’HTML e il JavaScript che generano la pagina (potete trovare questo codice anche
in validate.htm fra i file di esempio). Notate l’utilizzo di document.forms (in grassetto) per
accedere alla quantità specificata nel form. Notate anche che non riuscirete a inviare il form
perché la sua azione, catalog.php, non esiste. L’azione del form non è così importante per
questo esempio.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Catalog Example</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
function formValid(eventObj) {
if (document.forms["catalogform"]["quantity"].value > 3) {
alert("Limit 3 per Household.");
if (eventObj.preventDefault) {
eventObj.preventDefault();
} else {
window.event.returnValue = false;
}
Capitolo 14 Utilizzare JavaScript con i web form
291
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form name="catalogform" id="catalogform" action="catalog.php" method="POST">
<p>Order Blades of Grass From Steve Suehring's Lawn</p>
<div id="lawndiv"><img alt="steve suehring's lawn is dead" src="lawn.png"
id="lawnpic"><br></div>
<p>Description: Steve is terrible at lawn care, therefore there's not much
grass on his lawn. Quantities are extremely limited.</p>
<p>Price: $100.00 per blade</p>
<p>Quantity to order (Limit 3 per Household): <input type="text" name="quantity"></p>
<p><input type="submit" value="Place Order"></p>
</form>
<script type="text/javascript">
var formEl = document.getElementsByTagName("form")[0];
EHandler.add(formEl,"submit", function(eventObj) { formValid(eventObj); } );
</script>
</body>
</html>
Nota Un miglioramento che potreste apportare a questa convalida sarebbe assicurarvi che il
visitatore non tenti di ordinare un numero inferiore di fili d'erba!
Con JavaScript attivato nel mio browser, il tentativo dell’utente di ordinare una quantità di
tre o meno fili d’erba è accettabile, perciò il form viene inviato allo script lato-server, che
gestisce la richiesta e restituisce un totale ordine, mostrato nella figura 14.10.
Figura 14.10 Ordinando una quantità di tre fili d’erba o meno si ottengono i risultati attesi, incluso un
totale ordine.
292
Parte III Integrare JavaScript nella progettazione
Se l’utente torna alla pagina, ancora con JavaScript attivato, e tenta di ordinare quattro fili
d’erba, vede una finestra di dialogo alert() come quella nella figura 14.11.
Figura 14.11 Si verifica un errore JavaScript quando tento di ordinare più di tre fili d’erba.
Finora tutto bene. Immaginate adesso che io abbia disattivato JavaScript nel browser. Sulla
pagina non è visibile alcun cambiamento quando accedo al form di ordinazione, e la pagina
si presenta esattamente come quella nella figura 14.9. Ora però posso ordinare una quantità di 1500. Inserendo semplicemente 1500 come quantità e facendo clic su Place Order, il
web form lato-server riceve ed elabora felicemente l’ordine, come si vede nella figura 14.12.
Figura 14.12 Poiché JavaScript è disattivato, nulla ha convalidato questo ordine prima che arrivi al server.
Poiché non esisteva alcuna convalida sul lato server, questo input era perfettamente valido
e l’ordine poteva essere elaborato. L’unico problema è che non ho 1500 fili d’erba nel mio
prato (li ho contati), perciò non posso evadere l’ordine.
Questo scenario, che potrebbe sembrarvi alquanto strano, in realtà è estremamente frequente nelle applicazioni web. Ed è anche relativamente poco grave rispetto a situazioni in
Capitolo 14 Utilizzare JavaScript con i web form
293
cui un sito permette al visitatore addirittura di cambiare il prezzo di un articolo durante il
processo di ordinazione e non convalida l’input, “perché a nessuno verrebbe mai in mente
di cambiare il prezzo!”. Molto sbagliato! Qualcuno lo farà, eccome!
Potreste essere tentati di risolvere il problema richiedendo che tutti i visitatori abbiano
JavaScript attivato nei loro browser per poter effettuare un ordine, ma questo non funziona. Potete tentare di individuare se JavaScript è attivato, ma non potrete esserne certi al
100 percento.
L’unico modo corretto per risolvere il problema è convalidare e aggiungere regole di convalida sul lato server. Lo script di back-end dovrebbe controllare la regola di business del
limite di quantità. Questo non sarà né difficile ne lungo nella grande maggioranza dei casi,
e in questo caso mi avrebbe evitato di cercare di mettere insieme 1500 fili d’erba in un prato completamente inaridito.
Questa sezione ha dimostrato quanto è facile aggirare la convalida JavaScript semplicemente disattivando JavaScript sul browser. La sezione successiva illustra come utilizzare
JavaScript per la preconvalida. JavaScript dovrebbe essere utilizzato soltanto per la preconvalida e mai come unico mezzo per assicurare che l’input sia valido.
Convalidare un campo di testo
All’inizio di questo capitolo avete visto un esempio di come convalidare un campo di testo.
Se il campo era vuoto, compariva una finestra di dialogo alert(). In questa sezione vedrete
come fornire un feedback inline, accanto al campo del form, anziché utilizzare una finestra
di dialogo alert().
Segue il codice per ottenere questo (potete trovare questo codice anche in catalog.htm fra
i file di esempio):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Catalog Example</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
function formValid(eventObj) {
if (document.forms["catalogform"]["quantity"].value > 3) {
var submitbtn = document.forms["catalogform"]["submitbutton"];
var quantityp = document.getElementById("quantityp");
var errorel = document.createElement("span");
errorel.appendChild(document.createTextNode(" Limit 3 per Household"));
quantityp.appendChild(errorel);
if (eventObj.preventDefault) {
eventObj.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
294
Parte III Integrare JavaScript nella progettazione
} else {
return true;
}
}
</script>
</head>
<body>
<form name="catalogform" id="catalogform" action="catalog.php" method="POST">
<p>Order Blades of Grass From Steve Suehring's Lawn</p>
<div id="lawndiv"><img alt="steve suehring's lawn is dead" src="lawn.png"
id="lawnpic"><br/></div>
<p>Description: Steve is terrible at lawn care, therefore there's not much
grass on his lawn. Quantities are extremely limited.</p>
<p>Price: $100.00 per blade</p>
<p id="quantityp">Quantity to order (Limit 3 per Household): <input type="text"
name="quantity"></p>
<p id="submitp"><input id="submitbutton" type="submit" value="Place Order"></p>
</form>
<script type="text/javascript">
var formEl = document.getElementsByTagName("form")[0];
EHandler.add(formEl,"submit", function(eventObj) { formValid(eventObj); } );
</script>
</body>
</html>
Suggerimento Non vale nulla il fatto che la convalida JavaScript in questi ultimi esempi
utilizzi l'evento submit per attivare la convalida. L'evento submit dell'intero form è preferito rispetto all'evento click del pulsante Submit, in quanto l'evento submit del form si attiva indipendentemente dal fatto che il visitatore faccia clic sul pulsante Submit o prema Invio sulla tastiera.
Benvenuti nella programmazione JavaScript!
Fondamentalmente questo codice non fa nulla che non abbiate già visto fare. Il codice si
limita a controllare se il form è valido. Se il form non è valido, il codice crea e accoda un
elemento HTML span con il testo “Limit 3 per Household”, come mostrato nella figura 14.13,
anziché visualizzare una finestra di dialogo alert().
Capitolo 14 Utilizzare JavaScript con i web form
295
Figura 14.13 Fornire feedback inline su una pagina web anziché tramite la finestra di dialogo alert().
Esercizi
1. Create un web form che mostra una finestra di dialogo alert() basata sul tipo di input
eseguito in una casella di selezione.
2. Aggiungete un gruppo di pulsanti di opzione al form di ordinazione pizze visto
nell’esercizio di questo capitolo per accettare tre dimensioni di pizza: piccola, media e
grande. Visualizzate i risultati insieme al risultato dell’ordinazione della pizza.
3. Riprogettate il sistema di ordinazione pizze aggiungendo i pulsanti dell’esempio
originale e permettendo la selezione dei tipi di pizza Veggie Special, Meat Special o
Hawaiian. Questi pulsanti dovrebbero poi selezionare le caselle di controllo corrette
per gli ingredienti del tipo di pizza selezionato. Per la pizza Veggie Special selezionate
Green Peppers, Mushrooms e Onions; per la pizza Meat Special selezionate Sausage,
Pepperoni e Ham; per la pizza Hawaiian selezionate Pineapple e Ham.
