Controllo dei moduli con script Java.
Argomenti trattati:
- La gestione dei moduli con JavaScript:
Cosa è uno script e perché è vantaggioso controllare l'interazione nella pagina web.
La gestione dei campi con JavaScript
Uno degli aspetti più interessanti dell'interazione con l'utente, specie se si tratta di
comunicazione di dati obbligatori ad un necessario dialogo in Rete, è quello della gestione
dei contenuti dei campi inseriti da chi utilizza i nostri moduli.
Il problema che si pone chi gestisce i campi di un modulo è quello della sicurezza.
Ogni campo del modulo che prevede l'inserimento di testo rappresenta una porta aperta al
nostro server che ne deve elaborare i contenuti, quindi facilmente attaccabile, se non
adeguatamente protetto, da codice malevolo inserito da hacker.
Comunque ci occuperemo di questo importante aspetto nei capitoli successivi.
Quello che ci preme adesso sottolineare è verificare la presenza o meno di contenuto
all'interno dei campi del nostro modulo. Un esempio ci sarà di aiuto.
Inseriamo con il nostro editor il seguente codice HTML:
<html>
<head>
<title>Moduli con validazione prima dell'invio</title>
</head>
<body>
<form name="dati">
<p><font face="Arial" size="4">Moduli con convalida prima dell'elaborazione.
</font>
<p>Inserisci il tuo nome: <input type=text name=nome size=25></p>
<p>Inserisci il tuo cognome: <input type=text name=cognome size=25></p>
<p>La tua età: <input type=text name=eta size=3>
<p><input type=submit name="invio" value="Invia i dati"></p>
</form></body></html>
Il linguaggio HTML - prof. Maurizio Gambino | 11 Controllo moduli.
Dall'esempio sopra riportato si vedono tre campi di tipo testuale all'interno di un modulo
chiamato “dati”.
Per poter controllare il contenuto, o il mancato contenuto, prima di inviare i dati a chi dovrà
elaborarli, inseriremo nell'intestazione della pagina uno script in linguaggio Java (detto
JavaScript) di gestione dei campi e nel modulo, attraverso il gestore degli eventi
onsubmit, la funzione che permette di attivarlo:
<html><head>
<title>Moduli con validazione prima dell'invio</title>
<script>
function controlla()
{
errore="";
if (dati.nome.value=="") errore+="Non hai inserito il nome.\n";
if (dati.cognome.value=="") errore+="Non hai inserito il cognome.\n";
if (dati.eta.value=="") errore+="Non hai inserito l'eta'\n";
if (errore!="")
{
alert ("Attenzione! hai commesso i seguenti errori:\n"+errore);
return false;
}
else
return true;
}
</script></head>
<body>
<form name="dati" onsubmit="return controlla()">
<p><font face="Arial" size="4">Moduli con convalida prima dell'elaborazione. </font>
<p>Inserisci il tuo nome:
<input type=text name=nome size=25></p>
<p>Inserisci il tuo cognome:
<input type=text name=cognome size=25></p>
<p>La tua età:
<input type=text name=eta size=3>
<p><input type=submit value="Invia i dati" name="invio"></p>
</form></body></html>
Il linguaggio HTML - prof. Maurizio Gambino | 11 Controllo moduli.
Il codice dello script altro non è che lo sviluppo di una funzione, molto simile al linguaggio C, per
chi ha dimestichezza con questo linguaggio, chiamata “controlla”, la quale restituisce un valore
booleano in base alla rilevazione o meno di contenuto nei campi del modulo.
Da prestare particolare attenzione al percorso per prelevare i valori inseriti dall'utente:
if (dati.nome.value=="") errore+="Non hai inserito il nome.\n";
Come potete notare per gestire un valore inserito lo script opera sul seguente percorso:
Nome modulo -> Nome Campo -> attributo value
Come da esempio in tabella.
La funzione alert() permette di generare una finestra di dialogo con tasto centrale di
conferma (OK), se si verifica un errore nella compilazione dei campi, è il cui unico
parametro è il messaggio racchiuso tra apici. L’istruzione \n crea un ritorno a capo nella
fase di scrittura del messaggio. Nel nostro esempio abbiamo unito al messaggio di errore
l'elenco degli stessi attraverso l'operatore + :
alert ("Attenzione! hai commesso i seguenti errori:\n"+errore);
L'attributo onsubmit del modulo permette di eseguire, una volta premuto il tasto di invio
del modulo, una qualsiasi azione indicata dal valore.
Nel nostro caso indichiamo di restituirci il valore booleano della funzione controlla()
dichiarata in intestazione:
<FORM NAME="dati" onsubmit="return controlla()">
Per chi volesse, come approfondimento, possiamo dire che in alternativa ad alert() si può
utilizzare la funzione confirm().
Questa funzione prevede lo stesso attributo di alert(), cioè un messaggio testuale tra apici,
e genera, in aggiunta, il tasto Annulla accanto a quello di conferma.
Il linguaggio HTML - prof. Maurizio Gambino | 11 Controllo moduli.
Scarica
