Come convalidare un campo della form con Javascript

Per verificare il contenuto di un campo della form prima di inviare il modulo, richiamo uno script javascript al momento del click sul pulsante di submit.

A cosa serve? Lo script javascript controlla dal lato client se il campo è stato compilato correttamente dall'utente. Se il campo è stato compilato male, il modulo non viene inviato al server e viene visualizzato un messaggio di alert all'utente. In questo modo evito di sovraccaricare il server a causa di richieste errate.

Lo script javascript deve essere inserito nella sezione <head> del documento HTML.

Un esempio pratico

Questo documento html contiene una semplice form in cui chiedo all'utente di compilare un campo e dare invio.

<html>
<head>
<script language="Javascript">
function validate() {
if (document.form1.nome.value.length<1) {
alert("Il nome è mancante");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form1" method="post" action="/elabora.php" onsubmit="return validate()">
<input type="text" name="nome">
<input type="submit" value="Invia">
</form>
</body>
</html>

Nelle righe 4-11 della sezione <head> inserisco uno script in javascript, dandogli il nome valida().

Nella form alla riga 14 aggiungo l'attributo onsumit per richiamare lo script validate() al momento del submit.

Quando l'utente clicca sul pulsante di submit, la form chiama lo script validate(), si mette in attesa e attende la risposta.

Nota. Per chiedere alla form di chiamare più script è sufficiente elencarli con gli opportuni operatori booleani. Ad esempio "return valida1() && valida2()". Senza indicare l'istruzione return la form chiamarebbe comunque lo script facendo però un aggiornamento del modulo in caso di esito negativo. Con l'istruzione return si evita il refresh.

Lo script validate() controlla la lunghezza del dato digitato dall'utente nel campo nome della form.

if (document.form1.nome.value.length<1) {
alert("Inserisci il titolo");
return false;
}
return true;

Se la lunghezza della stringa è inferiore a 1 (ossia è nulla), lo script visualizza un messaggio di errore sullo schermo dell'utente e restituisce false alla form.

La form riceve il valore di ritorno "false" e blocca l'invio dei dati al server.

In questo modo si evita di sovraccaricare il server con richieste errate.

Nota. I controlli dal lato client sono utili ma non sostituiscono i controlli dal lato server. Per ragioni di sicurezza è buona norma fare i controlli sui dati digitati dall'utente anche dal lato server.

E così via.