Quanti form riempiamo giornalmente navigando in internet? Un navigatore abituale penso ne riempirà almeno un paio al giorno! Per non parlare dei blogger, che si fanno visita giornalmente e si scambiano commenti!
Una cosa veramente fastidiosa è rimepire un form (magari bello lungo), cliccare sul tasto per inviarlo e scoprire che ci siamo dimenticati un dato che invalida l’invio del form.
Se la cache del browser ci aiuta, tornando indietro possiamo correggere l’errore evitando di riscrivere tutto il form, ma questo non sempre succede. Dipende dalle impostazioni del nosro browser, nonchè dal comportamento dello script di controllo.
La cosa non è noiosa solo per gli utenti, ma anche per gli amministratori dei sistemi, che vedono molta banda sprecata per comunicazioni di errore (la molta è relativa al traffico del sito ovviamente).
Ed allora, perchè non controllare un form non appena l’utente lancia l’istruzione di invio? In parole povere: piuttosto che far controllare la validità del form alla pagina risultante da action, faremo controllare i dati inseriti dalla pagina madre!
Il form
Deve essere ben concepito. L’attributo name non può essere omesso. Non solo perchè è buona norma metterlo, ma perchè diventerà necessario per l’implementazione del codice javascript di controllo.
Costruiamo il nostro form.
<input type="text" name="nome" />
<input type="text" name="cognome" />
<textarea name="note" rows="5" cols="42"></textarea>
<input type="submit" name="go" value="Invia Form" />
La funzione Javascript
Una funzioncina semplice semplice 
. Considereremo l’eventualità di NON voler campi vuoti. La funzione è poi adattabile a mille eventualità.
//Attenzione e with!
//Qui imposto il form da controllare!
with(document.NomeForm){
if(nome.value == ""){
a = "Il campo Nome e’ obbligatorio
";
}else{
a = "";
}
if(cognome.value == ""){
b = "Il campo Cognome e’ obbligatorio
";
}else{
b = "";
}
if(note.value == ""){
c = "Il campo Note e’ obbligatorio
";
}else{
c = "";
}
//Se si verificano le condizioni di NON validazione invio un alert
if(commento.value == "" || cognome.value == "" || note.value == ""){
alert(‘Sono stati riscontrati i seguenti errori:
‘ + a + b + c);
//E qui blocco lo script per impedire che l’action del form sia eseguito!
return false;
}
}
}
Usare la funzione
Per utilizzare il tutto dovremo poi includere il nostro script nei tag del head, come faremmo con qualsiasi altro script javascript. Possiamo scegliere di includere un file *.js che racchiuda il form. E questa è IMHO la soluzione migliore, perchè per aggiornare la funzione lavoreremo su un file autonomo.
Per mandare in loading la funzione dovremo modificare anche il codice del nostro form come segue:
Avvertimento
Molti webmaster hanno l’abitudine di scrivere istruzioni come onclick, onsubmit, onmouseover con delle maiuscole in mezzo: onSubmit, onClick, onMouseOver… Cosa utile per leggere più facilmente l’istruzione!
Poco indicata se come linguaggio si sta usando XHTML, perchè questo è un linguaggio all lower cases.
Ottima dritta grazie davidonzo