I moduli HTML hanno assunto nel corso del tempo un'importanza strategica di tutto rispetto nell'ecomonomia generale di molti siti Web. La loro facilità d'uso e di impostazione li ha resi strumenti principe nel rapporto diretto tra navigatori e webmaster. Senza entrare nel merito di analisi psicologiche che non ci competono, è agevole notare come la compilazione di un modulo sia preferita alla spedizione di un'e-mail, soprattutto quando si richiedono informazioni generali.
Quello che intendiamo sviluppare in questa sede è un controllo che Javascript consente di effettuare sulla compilazione dei moduli. È frequente che alcuni moduli vengano compilati privi di parti fondamentali, senza le quali gli stessi non hanno ragion d'essere. In questo modo si ha il duplice svantaggio di ricevere informazioni parziali e inservibili, e apparire villani nei confronti dei visitatori che immaginano di ricevere una risposta che non verrà mai, per esempio, perchè il campo "e-mail" non è stato compilato per dimenticanza.
Per evitare certi inconvenienti è possibile un controllo in tempo reale sulla completa compilazione del form da parte del visitatore. In altre parole, se l'utente non compila tutti i campi, o solo alcuni, otterrà un messaggio di avviso che indica l'errore o la dimenticanza.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento al file sopracitato, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Si tratta dell'unico esempio di questo script, contenente tutto il codice necessario al corretto funzionamento dello stesso.
Il codice dello script è in parte contenuto tra i tag <head> del documento, e in parte del corpo dello stesso. Cominciamo con la sintassi contenuta tra i tag <head>:
<script type="text/javascript" language="javascript">
function checkrequired(which){
var pass=true
if (document.images){
for (i=0;i<which.length;i++){
var tempobj=which.elements[i]
if (tempobj.name.substring(0,8)=="required"){
if
(((tempobj.type=="text"||tempobj.type=="textarea")&&tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1)){
pass=false
break
}
}
}
}
if (!pass){
alert("Non hai compilato correttamente il form. Alcune informazioni non sono state inserite. Clicca su OK e verifica l'errore")
return false
}
else
return true
}
</script>
La riga di codice:
alert("Non hai compilato correttamente il form. Alcune informazioni non sono state inserite. Clicca su OK e verifica l'errore")
imposta il messaggio che il browser darà in risposta quando verificherà l'assenza di alcuni campi obbligatori. Ovviamente il messaggio puo' essere modificato secondo le proprie esigenze.
Il resto del codice esaminato non va oltremodo modificato.
All'interno dei campi <body> va inserito il codice HTML che costruisce il form:
<form onSubmit="return checkrequired(this)">
Nome e cognome *
<input type=text name="requirednome" size="4"0>
E-mail *
<input type=text name="requiredmail" size=30>
Telefono
<input type=text name="telefono" size=20>
i tuoi hobby: *
<select size=1 name="requiredhobby">
<option selected value=>
<option value="internet"> internet
<option value="sport"> sport
<option value="altro"> altro
</select>
<input type="submit" value="spedisci"></input>
</form>
Il form ha quattro voci da compilare:
- nome e cognome
- telefono
- hobby
Tutti i campi contrassegnati da un asterisco sono obbligatori, mentre l'unico facoltativo è il numero di telefono.
Il form viene aperto dalla riga di codice:
<form onsubmit="return checkrequired(this)">
che richiama la funzione "checkrequired" impostata tra i tag <head>.
Questo non è sufficiente ad impostare i campi obbligatori, ma è necessario agire ulteriormente sui nomi dei singoli campi, anteponendo il termine "required" ad ognuno di essi.
Per esempio il nome del primo campo è "nome", e per essere impostato come obbligatorio deve trasformarsi in "requirednome". Cosi' gli altri:
email --> requiredemail
hobby --> requiredhobby
L'unico campo che rimane invariato è "telefono" in quanto abbiamo deciso di lasciarlo facoltativo.
Fatto questo non ci rimane che inserire un normale bottone di spedizione e verificare il buon esito del nostro esempio.
