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