La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

In… Form… iamoci (validazione delle form). Bruni e Giorgetti2 Operazioni comuni Ormai siete esperti nella gestione degli eventi Rivediamo velocemente.

Presentazioni simili


Presentazione sul tema: "In… Form… iamoci (validazione delle form). Bruni e Giorgetti2 Operazioni comuni Ormai siete esperti nella gestione degli eventi Rivediamo velocemente."— Transcript della presentazione:

1 In… Form… iamoci (validazione delle form)

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 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.getElementById(mytext).value; valore = document.getElementById(mypassword).value; valore = document.getElementById( mytextarea).value; //usare parseInt per valori numerici

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

5 Bruni e Giorgetti5 Determinare il valore selezionato di un radio valore = ; for (i=0; i

6 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; }

7 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

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

12 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

13 Bruni e Giorgetti13 Valori in opportuni intervalli I usare un campo di input per leggere valori tra 10 e 100 inclusi

14 Bruni e Giorgetti14 Valori in opportuni intervalli II

15 Bruni e Giorgetti15 Stringhe non vuote I usare un campo di input per leggere nome e cognome

16 Bruni e Giorgetti16 Stringhe non vuote II

17 Bruni e Giorgetti17 sensate I usare un campo di input per leggere un indirizzo

18 Bruni e Giorgetti18 sensate II

20 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

21 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

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.getElementById(mycheckbox).checked) { alert(document.getElementById(mycheckbox).value) }

24 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; }

25 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); }

26 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

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


Scaricare ppt "In… Form… iamoci (validazione delle form). Bruni e Giorgetti2 Operazioni comuni Ormai siete esperti nella gestione degli eventi Rivediamo velocemente."

Presentazioni simili


Annunci Google