Oggi vedremo come validare un form in JavaScript, ovvero garantire prima dell’invio dei dati che l’utente abbia immesso dei dati validi o quantomeno ‘abbastanza validi’.

Ecco come dovrà essere l’esempio del form in JavaScript. Provate ad inserire i dati e cliccate sul pulsante invia.

Nome

Telefono

Email:

Password

Conferma password:

Esempio di possibile risoluzione: validare un form in JavaScript

Utilizzeremo un metodo a scopo didattico molto semplice, in quanto successivamente, quando impareremo ad utilizzare le Ajax, svilupperemo un metodo molto più funzionale.

Inoltre in questo esempio, per validare un form in JavaScript, potremmo utilizzare il metodo getElementById(), come abbiamo utilizzato negli esempi precedenti, ma vi mostro un altro modo per recuperare i dati dai campi di input.

Form in html

Per creare il nostro esempio, su come validare un form in JavaScript, innanzitutto dobbiamo creare il nostro form in html, come abbiamo già fatto nell’articolo sui form html.

Diamo al form il nome di invio per poi poterlo richiamare.

Inseriamo i vari campi di input con le relative etichette e infine il pulsante per inviare i dati su cui inseriremo l’evento onclick:

<form method="post" name="invio">
<p><label>Nome</label><input type="text" name="nome"></p> 
<p><label>Telefono</label><input type="text" name="telefono"></p> 
<p><label>Email:</label><input type="text" name="email"></p>
<p><label>Password</label><input type="password" name="password"></p>
<p><label>Conferma password:</label><input type="password" name="conferma"></p>
<br>
<p>
<input type="submit" value="Invia" onclick="valida()"></p>
</form>

Script per validare il form

Adesso dobbiamo costruire la nostra funzione valida() richiamata nel pulsante invia.

Per ricavare i vari campi immessi negli input in questo caso useremo:

document.nome_del_form.nome_campo.value;

quindi ad esempio: document.invio.nome.value dove invio come detto prima è il nome che abbiamo assegnato al form e nome è il campo di input.

Dopo aver preso tutti i campi, passo ai controlli.

Il primo campo che controllo sarà il nome. Se il nome è un campo vuoto allora faccio aprire la finestra di dialogo che mi avvisa che il campo deve essere compilato (ormai come dicevo prima, questo metodo è un pò primitivo).

Faccio lo stesso con il campo telefono, ma controllo anche che sia numerico.

Per quanto riguarda la mail, devo controllare se è un’espressione nella forma: nome@dominio.it.

Perciò utilizzo le espressioni regolari:
var email_valid = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/;

Dopo faccio il test per vedere se la mail inserita è nel formato dichiarato nella variabile email_valid.

Se il test è false, richiedo nuovamente l’inserimento, suggerendo di inserire un formato valido.

Poi faccio il controllo sulla password. Innanzitutto controllo la lunghezza, per verificare che sia composta almeno da sei caratteri e poi controllo se la conferma password coincide con questa.

N.B. anche per la password potrei impostare un’espressione regolare in modo da rispettare determinati standard; tipo caratteri minuscoli e maiuscoli, ecc…

Se tutti i controlli sono ok, si passa all’invio del modulo, in questo caso occorre inserire in document.invio.action = “#”; al posto di # l’indirizzo della pagina che dovrà elaborare i dati.

Allego lo script per validare un form in JavaScript.

<script type="text/javascript">
<!--
function valida() {
// Variabili associate ai campi del modulo
   var nome = document.invio.nome.value;
   var password = document.invio.password.value;
   var conferma= document.invio.conferma.value;
   var telefono = document.invio.telefono.value;
   var email = document.invio.email.value;
   if ((nome == "") || (nome == "undefined")) {
      alert("Devi inserire un nome");
      document.invio.nome.focus();
      return false;
   }
   if ((isNaN(telefono)) || (telefono == "") || (telefono == "undefined")) {
      alert("Devi inserire il telefono, attenzione deve essere numerico!");
      document.invio.telefono.value = "";
      document.invio.telefono.focus();
      return false;
   }
// Espressione regolare dell'email
   var email_valid = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/;
   if (!email_valid.test(email) || (email == "") || (email == "undefined")) 
   {
      alert("Devi inserire un indirizzo mail corretto");
      document.invio.email.focus();
      return false;
   }
  if (password.length < 6 || (password == "") || (password == "undefined") ) 
   {
    alert("Scegli una password, minimo 6 caratteri");
    document.invio.password.focus();
    return false;
   }
   //Effettua il controllo sul campo CONFERMA PASSWORD
   if ((conferma == "") || (conferma == "undefined")) {
      alert("Devi confermare la password");
      document.invio.conferma.focus();
      return false;
    }
    if (password != conferma) {
       alert("La conferma password");
       document.invio.conferma.value = "";
       document.invio.conferma.focus();
       return false;
    }
    else {
      document.invio.action = "#"; 
      document.invio.submit();
   }
}
//-->
</script>

Alcuni link utili

Template responsive con html

Css Responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Form in html

Tag strong

Collegamenti interni ad una pagina web