In… Form… iamoci (validazione delle form)

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 dei campi con nomi mytext, mytextarea, mycheckbox, myradio, etc.

Bruni e Giorgetti3 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 Giorgetti4 Controllare se una checkbox è selezionata o meno if (document.getElementById(mycheckbox).checked){ valore = document.getElementById(mycheckbox).value } else { valore = ; }

Bruni e Giorgetti5 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 Giorgetti6 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 Giorgetti7 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(-);

Validazione

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

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.

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 dellinvio del modulo –tecniche miste

Bruni e Giorgetti12 Verifica costante usare lattributo 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 sullelemento in esame per costringere lutente a inserire dati corretti –controlli tipici: valori compresi in un certo intervallo, stringhe non vuote, indirizzi di sensati usare lattributo 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 Giorgetti13 Valori in opportuni intervalli I usare un campo di input per leggere valori tra 10 e 100 inclusi <input type=text id=mytext name=mytext size=3 maxlength=3 value=10 onblur=controlla(); /> …

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

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

Bruni e Giorgetti16 Stringhe non vuote II <!-- 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); } //-->

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

Bruni e Giorgetti18 sensate II <!-- function controlla() { var testo= document.getElementById(mytext).value; var ok = true; if(testo.length<5) { ok=false; } // almeno 5 caratteri var if (primoAt == -1) { ok=false; } // almeno > primoAt) { ok=false; } // una if (primoAt == 0 || primoAt == testo.length-1) { ok=false; } // primo e ultimo carattere diversi if(testo.indexOf( ) != -1) { ok=false; } // niente spazi …

Bruni e Giorgetti19 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( insana!); } //-->

Bruni e Giorgetti20 Verifica allinvio la verifica costante potrebbe essere fastidiosa per lutente –(i campi della form dovrebbero poter essere riempiti gradualmente e in ordine sparso) possiamo rimandare i controlli al momento dellinvio usare lattributo 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

Bruni e Giorgetti21 Verifiche combinate controllare i dati principali ad ogni modifica eseguire un controllo aggiuntivo di consistenza prima dellinvio 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 –lutente potrebbe disattivare JS

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.

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

Bruni e Giorgetti24 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 Giorgetti25 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 Giorgetti26 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 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