Molte delle mie idee nascono dalle esigenze di lavoro. Qualche giorno fa un cliente mi ha fatto una richiesta legittima. "Molto spesso i visitatori del mio sito non compilano qualche campo fondamentale del form, non possiamo fare niente?". Detto fatto. Nel caso di specie si trattava solo di verificare se inserivano o meno la ragione sociale o se indicavano la provincia di appartenenza (alzi la mano chi sa dove si trova Surano!), ma dal controllo del campo TEXT alla verifica di altri tipi il passo è breve.
Andiamo a cominciare.
Una premessa, per poterne controllare i valori, ogni singolo campo del form dev'essere identificato. Per comodità userò l'attributo NAME="", quindi il mio form si chiamerà
NAME="info" mentre il nome dei singoli campi rifletterà il significato dei campi stessi: così avremo
NAME="nome" per il nome,
NAME="browser" quando chiederò di specificare il browser, e così via. Fatto questo andremo ad identificare il campo del nome con la notazione
document.info.name, dove "document" è obbligatorio e sottintende il documento HTML che contiene il form stesso.
Il primo tipo di controllo che facciamo è proprio verificare se un campo di testo (TEXT O TEXAREA) è stato riempito o meno. È impossibile naturalmente verificare se è stata scritta una cosa di senso compiuto o se lo spiritoso di turno afferma di chiamarsi Paolino Paperino, ma almeno possiamo vedere se ci ha scritto qualcosa.
Teniamo aperta la finestra dell'esempio. quello che segue è il codice che controlla se il campo
Nome: è stato compilato:
if (document.info.nome.value == "" )
{...}
mentre con questo:
if (document.info.email.value == "" )
{...}
controlliamo se c'è scritto qualcosa nel campo e-mail.
Nell'esempio c'è una chicca. Peccherò di presunzione, ma non l'ho visto in giro abbastanza spesso. Oltre a far inserire l'indirizzo di e-mail, e a controllare se questo contiene una
"@"(*) controlliamo anche se gli indirizzi e-mail sono uguali. Non commento perché sarebbe troppo lungo (anche per i miei standard :-) e vi lascio allo studio del sorgente. La verifica per esercizio. Ho sempre desiderato dirlo! Andiamo avanti.
Il campo SELECT. Anche questo è facilissimo. Le varie OPTIONS sono numerate a partire da
0 (zero), quindi se per prima mettiamo una option fittizia (io ho usato la parola "Scegli" basta controllare se l'OPTION selezionata è la numero zero:
if (document.info.uso.selectedIndex == 0)
{...}
E veniamo alle due cose un po' più complicate.
RADIO: questo è intuitivo ma non complicato. Se nessun RADIObutton è preselezionato (e così dev'essere se vogliamo una risposta vera) basta controllare se almeno uno dei bottoni è stato CHECKED.
Se il form contiene 3 RADIO con NAME="browser" la sintassi sarà:
for ( i = 0 ; i < 3 ; i++ )
{
(document.info.browser[i].checked == 1)?browserselezionato=false:null
}
Non devo fare altro che controllarli uno ad uno.
Ultimo perché più complicato il controllo dei CHECKBOX. Qui a differenza del RADIO la difficoltà sta nel fatto che dobbiamo controllare che
almeno uno dei box sia stato cliccato (anche il controllo di un numero minimo maggiore ad uno ve lo lascio volentieri; io ci ho messo quasi due ore per far funzionare questo! :-).
Due premesse:
- il simbolo || in JavaScript sta a specificare l'operatore logico or (standard) e all'interno di una if (...) vuol dire dev'essere verificata almeno una delle condizioni;
- vedete dal sorgente che ho inizializzato una variabile (a true o false secondo come mi serviva) per ogni singola verifica, (della variabile principale controllo vi spiego fra poco), in particolare ora mi serve la come che per default è false
Questo è lo script:
for (i=1;i<6;i++)
{
if ((come) || (document.info["come"+i].checked)){come=true}
}
if (!come)
{
controllo=true;
}
Conto fino a 5 perché ho 5 CHECKBOX nel mio form. Anche qui devo spazzolare tutti i singoli CHECKBOX, ma dato che possono essere uno o più quelli selezionati, se il secondo era CHECKED e sto controllando il quarto (non CHECKED) devo mantenere memoria che la condizione è verificata e posso far partire il form. Ecco perché uso l'operatore
or. La variabile di controllo locale (
come) parte "false", se durante il controllo l'i-esimo box è selezionato assume il valore
true e
lo mantiene fino alla fine perché sia che venga "
or-ata" con un campo CHECKED (
true) che UNCHECKED (
false), dato che
|| vuol dire "almeno uno o tutti e due" a
come viene comunque assegnato un valore
true. Se poi, partita
false continua a trovarsi insieme a campi UNCHECKED (
false anch'essi) allora non pernderà mai il valore
true e la condizione "almeno uno dei CHECKBOX è selezionato?" non verrà soddisfatta.
Infine dopo i singoli controlli la verifica che faccio non è su "come" ma sul suo valore negato (
!come) perchè comunque il controllo di tutto il form lo faccio... al negativo.
E vediamo subito il perché. Semplicemente perché è più logico (umanamente parlando).
Quello che vogliamo verificare è: "C'è qualche campo del form non riempito?" se ne trovo uno non riempito la risposta è "si" e quindi viene spontaneo far diventare "vera" (
true) una variabile. Variabile che è appunto
controllo e che in effetti parte dal valore
false. Allora si spiega subito perché per assegnare a "controllo" il valore
true mi chiedo <"come" è falsa?> (NON vera?): se "si" controllo diventa "vera" ed il form non posso spedirlo.
Per far partire i controllo aggiungo l'event-handler
OnSubmit="return ControllaForm(this)" al tag
<FORM>. Se alla fine di tutte le verifiche la variabile "controllo" è rimasta
false, nell'ultima "if (...)" della funzione "ControllaForm(this)" che è questa:
if (controllo){return false}else{return true}
viene eseguito il "return true" che da l'Ok acché il form sia spedito.
(*) Naturalmente il controllare se c'è la chiocciolina non ci garantisce che l'indirizzo sia giusto, come nessuna garanzia ci da la verifica dell'uguaglianza dei due dati inseriti. Direi che comunque grazie alla doppia verifica possiamo essere più che certi che il dato inserito sia corretto.
A meno che non venga internzionalmente fornito un indirizzo fasullo.