In… Form… iamoci (validazione delle form)

(1)

In… Form… iamoci

(validazione delle form)

(2)

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.

(3)

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 Giorgetti 4

Controllare se una checkbox è selezionata o meno

if

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

valore = document.getElementById(“mycheckbox“).value } else {

valore = “”;

}

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

} }

(6)

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;

}

(7)

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(“-”);

(8)

Validazione

(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

(10)

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.

(11)

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)

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)

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>

(14)

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>

(15)

Stringhe non vuote I

• usare un campo di input per leggere nome e cognome

<input type=“text” name=“mytext”

id=“mytext”

value=“”

…

</form>

(16)

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();

alert(“Non puoi lasciare il campo vuoto”);

} }

//-->

</script>

(17)

Email sensate I

• usare un campo di input per leggere un indirizzo email

<input type=“text” name=“mytext”

id=“mytext”

value=“”

…

</form>

(18)

Email sensate II

<!--

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

…

(19)

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();

alert(“Email insana!”);

} }

//-->

</script>

(20)

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

(21)

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)

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)

Controllare se una checkbox è selezionata o meno

if (

document.getElementById(“mycheckbox“).checked)

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

(24)

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)

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)

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

} } }

(27)

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