Programmazione Web » Javascript » Rendere obbligatori i campi di un form
Rendere obbligatori i campi di un form
Difficoltà:
Scritto da Alberto Giuliani
Sito Web: http://www.agwebsolutions.it 
Questo tutorial è stato letto 1188 volte
In questo tutorial vedremo come con un semplice ciclo if-else in Javascript sia possibile controllare i campi di un form. Utile se abbiamo un modulo con campi obbligatori e vogliamo che gli utenti li compilino.
Supponiamo di avere un form "modulo", con due campi, "nome" e "cognome". Ecco il codice:
<form name="modulo" id="modulo" onSubmit="return controllo();" method="post" action="">
<input name="nome" type="text" id="nome" size="30" />
<br />
<input name="cognome" type="text" id="cognome" size="30" />
<br />
<input type="submit" name="Submit" value="Invia" />
</form>
Da notare di questo codice la riga
onSubmit="return controllo();"
che richiama la funzione Javascript "controllo" al click sul pulsante di submit (Invia nel nostro caso).
Ecco quindi il codice Javascript da posizionare tra i tags <head>:
<script language="JavaScript">
function controllo(){
with(document.modulo) {
if(nome.value=="") {
alert("Errore: compilare il campo NOME");
nome.focus();
return false;
}
if(cognome.value=="") {
alert("Errore: compilare il campo COGNOME");
cognome.focus();
return false;
}
}
alert("Controllo effettuato con successo. Il modulo sarà inviato.");
return true;
}
</script>
Da notare
with(document.modulo)
che serve ad effettuare il codice nel form "modulo" della pagina (document).
Ogni controllo di nullità dei campi se vero genera un alert, rende attivo il campo in questione e restituisce return false. Quindi nel caso in cui tutti i campi siano stati compilati correttamente, genera un alert e restituisce return true.
Sicuramente il modulo è personalizzabile. Ad esempio, si potrebbero effettuare dei controlli ulteriori in presenza di campo "email"... Lascio comunque a voi questo divertimento.
Aggiungi questo tutorial ai preferiti
