In… Form… iamoci (validazione delle form). Bruni e Giorgetti2 Operazioni comuni Ormai siete...

In… Form… iamoci(validazione delle

form)

Bruni e Giorgetti 2

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 3

Prendere il valore da un campo di input di tipo

text, password o textareavalore = document.getElementById(“mytext“).value;

valore = document.getElementById(“mypassword“).value;

valore = document.getElementById(“ mytextarea“).value;

//usare parseInt per valori numerici

Bruni e Giorgetti 4

Controllare se una checkbox è selezionata o

menoif (document.getElementById(“mycheckbox“).checked){ valore = document.getElementById(“mycheckbox“).value} else { valore = “”;}

Bruni e Giorgetti 5

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 6

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 7

Determinare il valore e il testo delle opzioni in un select

multiplovalore = 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 Giorgetti 9

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 10

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.


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


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


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>

Valori in opportuni intervalli II

<script type=“text/javascript”>



</script>


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>

Stringhe non vuote II<script type=“text/javascript”></script>


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>

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…


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>


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


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


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.


Controllare se una checkbox è selezionata o

meno

if (document.getElementById(“mycheckbox“).checked)

{ alert(document.getElementById(“mycheckbox“).value) }


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

}



campo select singolo

with (document.getElementById(“myselect“))

{ alert(options[selectedIndex].value);

alert(options[selectedIndex].text);

}



campo select multiplowith (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); } }}


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

In… Form… iamoci (validazione delle form). Bruni e Giorgetti2 Operazioni comuni Ormai siete...

Documents

Transcript of In… Form… iamoci (validazione delle form). Bruni e Giorgetti2 Operazioni comuni Ormai siete...