Capitolo 14 Utilizzare JavaScript con i web form Dopo aver letto questo capitolo, sarete in grado di: n n n n Comprendere come convalidare l input su un a web form utilizzando JavaScript. Lavorare con pulsanti di opzione, caselle di selezione e caselle di controllo, per ottenere i loro valori e impostare il loro stato. Fornisce un feedback basato sulla convalida, sia tramite una finestra di dialogo alert() sia all interno del documento. 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 è mostrato 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 LISTaTO 14.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. LISTaTO 14.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. FIgura 14.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">
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> Capitolo 14 Utilizzare JavaScript con i web form 283 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 = "veggies"; else if (pizzatype.value == "Meat Special") { document.forms["pizzaform"].topping.value = "meat"; else if (pizzatype.value == "Hawaiian") { document.forms["pizzaform"].topping.value = "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. FIgura 14.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). LISTaTO 14.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.