In… Form… iamoci (validazione delle form) Roberto Bruni e Daniela Giorgetti.

Presentazione sul tema: "In… Form… iamoci (validazione delle form) Roberto Bruni e Daniela Giorgetti."— Transcript della presentazione:

1 In… Form… iamoci (validazione delle form) Roberto Bruni e Daniela Giorgetti

2 Bruni e Giorgetti2 Operazioni comuni Ormai siete esperti nella gestione degli eventi 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.

3 Bruni e Giorgetti3 Prendere il valore da un campo di input di tipo text, password o textarea valore = document.myform.mytext.value; valore = document.myform.mypassword.value; valore = document.myform.mytextarea.value; //usare parseInt per valori numerici

4 Bruni e Giorgetti4 Controllare se una checkbox è selezionata o meno if (document.myform.mycheckbox.checked){ valore = document.myform.mycheckbox.value } else { valore = “”; }

5 Bruni e Giorgetti5 Determinare il valore selezionato di un radio valore = “”; for (i=0;i<document.myform.myradio.length;i++) { if (document.myform.myradio[i].checked) { valore = document.myform.myradio[i].value; break; }

6 Bruni e Giorgetti6 Determinare il valore o il testo di una opzione in un campo select singolo with (document.myform.myselect) { valore = options[selectedIndex].value; testo = options[selectedIndex].text; }

7 Bruni e Giorgetti7 Determinare il valore e il testo delle opzioni in un select multiplo valore = testo = “”; with (document.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(“-”);

8 Validazione

9 Bruni e Giorgetti9 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

10 Bruni e Giorgetti10 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.

11 Bruni e Giorgetti11 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

12 Bruni e Giorgetti12 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

13 Bruni e Giorgetti13 Valori in opportuni intervalli I usare un campo di input per leggere valori tra 10 e 100 inclusi <input type=“text” name=“mytext” size=“3” maxlength=“3” value=“10” onblur=“controlla();” /> …

14 Bruni e Giorgetti14 Valori in opportuni intervalli II <!-- function controlla() { var valore = parseInt(document.myform.mytext.value); if (isNaN(valore) || valore 100) { document.myform.mytext.focus(); document.myform.mytext.select(); alert(“Devi darmi un intero da 10 a 100”); } //-->

15 Bruni e Giorgetti15 Stringhe non vuote I usare un campo di input per leggere nome e cognome <input type=“text” name=“mytext” value=“” onblur=“controlla();” /> …

16 Bruni e Giorgetti16 Stringhe non vuote II <!-- function controlla() { var testo=document.myform.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.myform.mytext.focus(); document.myform.mytext.select(); alert(“Non puoi lasciare il campo vuoto”); } //-->

17 Bruni e Giorgetti17 Email sensate I usare un campo di input per leggere un indirizzo email <input type=“text” name=“mytext” value=“” onblur=“controlla();” /> …

18 Bruni e Giorgetti18 Email sensate II <!-- function controlla() { var testo=document.myform.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 …

19 Bruni e Giorgetti19 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.myform.mytext.focus(); document.myform.mytext.select(); alert(“Email insana!”); } //-->

20 Bruni e Giorgetti20 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 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

21 Bruni e Giorgetti21 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

22 Bruni e Giorgetti22 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.

23 Bruni e Giorgetti23 Controllare se una checkbox è selezionata o meno if (document.myform.mycheckbox.checked) { alert(document.myform.mycheckbox.value) }

24 Bruni e Giorgetti24 Determinare il valore selezionato di un radio for (i=0;i<document.myform.myradio.length;i++) { if (document.myform.myradio[i].checked) { alert(document.myform.myradio[i].value); break; }

25 Bruni e Giorgetti25 Determinare il valore o il testo di una opzione in un campo select singolo with (document.myform.myselect) { alert(options[selectedIndex].value); alert(options[selectedIndex].text); }

26 Bruni e Giorgetti26 Determinare il valore o il testo di una opzione in un campo select multiplo with (document.myform) { for (i=0;i<myselect.length;i++) { if (myselect.options[i].selected) { alert(myselect.options[i].value); alert(myselect.options[i].text); }

27 Bruni e Giorgetti27 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

28 Bruni e Giorgetti28 Esercizi