In… Form… iamoci (validazione delle form) Operazioni comuni • Ormai siete esperti nella gestione degli eventi • Rivediamo velocemente alcune operazioni di routine • Da ora in poi immaginiamo di avere • dei campi con nomi mytext, mytextarea, mycheckbox, myradio, etc. Bruni e Giorgetti 2 Prendere il valore da un campo di input di tipo text, password o textarea valore = document.getElementById(“mytext“).value; valore = document.getElementById(“mypassword“).value; valore = document.getElementById(“ mytextarea“).value; //usare parseInt per valori numerici Bruni e Giorgetti 3 Controllare se una checkbox è selezionata o meno if (document.getElementById(“mycheckbox“).checked){ valore = document.getElementById(“mycheckbox“).value } else { valore = “”; } Bruni e Giorgetti 4 Determinare il valore selezionato di un radio valore = “”; for (i=0; i<document.getElementById(“myradio“).length; i++) { if (document.getElementById(“myradio“).checked) { valore = document.getElementById(“myradio“)[i].value; break; } } Bruni e Giorgetti 5 Determinare il valore o il testo di una opzione in un campo select singolo with (document.getElementById(“myselect“)) { valore = options[selectedIndex].value; testo = options[selectedIndex].text; } Bruni e Giorgetti 6 Determinare il valore e il testo delle opzioni in un select multiplo valore = testo = “”; with (document.getElementById(“myform“)){ for (i=0;i<myselect.length;i++) { if (myselect.options[i].selected) { valore += “-”+myselect.options[i].value; testo += “-”+ myselect.options[i].text; } } } valori = valore.split(“-”); testi = testo.split(“-”); Bruni e Giorgetti 7 Validazione Le form di un tempo • Prima di JS il vero scopo delle form HTML era di inviare dati al server visto che il client non era abbastanza “intelligente” da elaborarli da solo • Stava al server inviare le risposte del caso in base ai dati ricevuti Bruni e Giorgetti 9 La validazione • Adesso è possibile spostare (tutta o in parte) la logica sul client. Come? – usando JS! • In particolare la validazione dei dati dovrebbe essere totalmente a carico del client. Perché? – Perché è in grado di farlo. Bruni e Giorgetti 10 Come, dove e quando • come: gestione eventi di JS • dove: nel documento che contiene la form • quando: – costantemente, ad ogni modifica dei campi – prima dell’invio del modulo – tecniche miste Bruni e Giorgetti 11 Verifica costante • usare l’attributo onchange oppure onblur – associare una funzione che controlli se i dati sono consistenti • visualizzare un messaggio di alert in caso contrario • usare i metodi focus() e select() invocati sull’elemento in esame per costringere l’utente a inserire dati corretti – controlli tipici: valori compresi in un certo intervallo, stringhe non vuote, indirizzi di email sensati • usare l’attributo onfocus per la protezione dei dati (es. totali di un ordine) – appena il campo riceve il focus lo togliamo passandolo ad un altro elemento della form Bruni e Giorgetti 12 Valori in opportuni intervalli I • usare un campo di input per leggere valori tra 10 e 100 inclusi <form id=“myform”> <input type=“text” id=“mytext” name=“mytext” size=“3” maxlength=“3” value=“10” onblur=“controlla();” /> … </form> Bruni e Giorgetti 13 Valori in opportuni intervalli II <script type=“text/javascript”> <!-function controlla() { var valore = parseInt(document.getElementById(“mytext“).value); if (isNaN(valore) || valore<10 || valore>100) { document.getElementById(“mytext“).focus(); document.getElementById(“mytext“).select(); alert(“Devi darmi un intero da 10 a 100”); } } //--> </script> Bruni e Giorgetti 14 Stringhe non vuote I • usare un campo di input per leggere nome e cognome <form id=“myform”> <input type=“text” name=“mytext” id=“mytext” value=“” onblur=“controlla();” /> … </form> Bruni e Giorgetti 15 Stringhe non vuote II <script type=“text/javascript”> <!-function controlla() { var testo= document.getElementById(“mytext“).value; var ok = false; for(i=0; i<testo.length; i++) { var lettera = testo.charAt(i); if (lettera != “ ” && lettera != “\t”) { ok=true; break; } } if (!ok) { document.getElementById(“mytext“).focus(); document.getElementById(“mytext“).select(); alert(“Non puoi lasciare il campo vuoto”); } } //--> </script> Bruni e Giorgetti 16 Email sensate I • usare un campo di input per leggere un indirizzo email <form id=“myform”> <input type=“text” name=“mytext” id=“mytext” value=“” onblur=“controlla();” /> … </form> Bruni e Giorgetti 17 Email sensate II <script type=“text/javascript”> <!-function controlla() { var testo= document.getElementById(“mytext“).value; var ok = true; if(testo.length<5) { ok=false; } // almeno 5 caratteri var primoAt=testo.indexOf(“@”); if (primoAt == -1) { ok=false; } // almeno una @ if(testo.lastIndexOf(“@”) > primoAt) { ok=false; } // una sola @ if (primoAt == 0 || primoAt == testo.length-1) { ok=false; } // primo e ultimo carattere diversi da @ if(testo.indexOf(“ ”) != -1) { ok=false; } // niente spazi … Bruni e Giorgetti 18 Email sensate III … if(testo.indexOf(“\t”) != -1) { ok=false; } // niente tabulazioni if(testo.lastIndexOf(“.”) == testo.length-1) { ok=false; } // ultimo carattere diverso da “.” if (!ok) { document.getElementById(“mytext“).focus(); document.getElementById(“mytext“).select(); alert(“Email insana!”); } } //--> </script> Bruni e Giorgetti 19 Verifica all’invio • la verifica costante potrebbe essere fastidiosa per l’utente – (i campi della form dovrebbero poter essere riempiti gradualmente e in ordine sparso) • possiamo rimandare i controlli al momento dell’invio • usare l’attributo onsubmit del pulsante di submit o del tag <FORM> stesso • associare una funzione che controlli se tutti i dati della form sono consistenti – visualizzare un messaggio di alert in caso contrario e restituire il valore false (altrimenti la form potrebbe essere inviata ugualmente) – se tutto va bene restituire true per essere sicuri di inviare la form Bruni e Giorgetti 20 Verifiche combinate • controllare i dati principali ad ogni modifica • eseguire un controllo aggiuntivo di consistenza prima dell’invio della form – il controllo aggiuntivo è molto sensato • il CGI dovrà comunque ricontrollare la consistenza dei dati perché – qualcuno potrebbe copiare il codice HTML della form, modificarla ed usarla per inviare dati – l’utente potrebbe disattivare JS Bruni e Giorgetti 21 Operazioni comuni • Ormai siete esperti nella gestione degli eventi e nella validazione… • Rivediamo velocemente alcune operazioni di routine • Da ora in poi immaginiamo di avere • una form con name myform • dei campi con nomi mytext, mytextarea, mycheckbox, myradio, etc. Bruni e Giorgetti 22 Controllare se una checkbox è selezionata o meno if ( document.getElementById(“mycheckbox“).checked) { alert(document.getElementById(“mycheckbox“).value) } Bruni e Giorgetti 23 Determinare il valore selezionato di un radio for (i=0;i< document.getElementById(“myradio“).length;i++) { if (document.getElementById(“myradio“)[i].checked) { alert(document.getElementById(“myradio“)[i].value); break; } } Bruni e Giorgetti 24 Determinare il valore o il testo di una opzione in un campo select singolo with (document.getElementById(“myselect“)) { alert(options[selectedIndex].value); alert(options[selectedIndex].text); } Bruni e Giorgetti 25 Determinare il valore o il testo di una opzione in un campo select multiplo with (document.getElementById(“myform“)) { for (i=0;i<myselect.length;i++) { if (myselect.options[i].selected) { alert(myselect.options[i].value); alert(myselect.options[i].text); } } } Bruni e Giorgetti 26 Il pulsante di help • Nelle form bisognerebbe sempre inserire un pulsante “Help” • se premuto dovrebbe aprire una nuova finestra senza toolbar, menubar, etc.. • nella finestra dovrebbero apparire le istruzioni per riempire il modulo • se il modulo è molto lungo e complicato potremmo anche inserire un pulsante di help per ogni campo, oppure per ogni “gruppo” di campi • Ricordarsi di inserire anche un pulsante per chiudere la finestra di Help Bruni e Giorgetti 27