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

Validare un form in JavaScript - Codice HTML

Realizziamo il codice html necessario per realizzare l'esempio. L'obiettivo ricordiamo è quello di validare un form in JavaScript prima dell'invio dei dati.

Nel codie HTML inseriamo un form con il method post, che serve per inviare i dati, e una action che contiene il riferimento alla pagina che si occupa dell'inserimento o invio dei dati. Nel form inseriamo le etichette con i campi di input di riferimento ed un button per inviare i dati.

Ecco dunque una possibile implementazione:

<form method="post" action="#" name="invio">
  <label for="nome">Nome</label>
  <input type="text" name="nome">

  <label for="telefono">Telefono</label>
  <input type="text" name="telefono">

  <label for="email">Email:</label>
  <input type="text" name="email">

  <label for="password">Password</label>
  <input type="password" name="password">

  <label for="conferma">Conferma password</label>
  <input type="password" name="conferma">

  <br>
  <input type="button" value="Invia" onClick="valida()">
</form>

Creaimo poi del CSS a piacere per formattare il nostro form per l'invio dei dati.

Codice JavaScript per validare un form in JavaScript

Realizziamo poi la funzione valida() legata all'evento onClick inserito nel button per l'invio dei dati.

function valida() {
      // Variabili associate ai campi del modulo
      const nome = document.invio.nome.value;
      const password = document.invio.password.value;
      const conferma = document.invio.conferma.value;
      const telefono = document.invio.telefono.value;
      const email = document.invio.email.value;

      // Espressione regolare dell'email
      const email_reg_exp = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/;

      if (!nome) {
        alert("Devi inserire un nome");
        document.invio.nome.focus();
        return false;
      }

      if (isNaN(telefono) || !telefono) {
        alert("Devi inserire il telefono, attenzione deve essere numerico!");
        document.invio.telefono.value = "";
        document.invio.telefono.focus();
        return false;
      }

      if (!email_reg_exp.test(email) || !email) {
        alert("Devi inserire un indirizzo mail corretto");
        document.invio.email.focus();
        return false;
      }

      if (password.length < 6 || !password) {
        alert("Scegli una password, minimo 6 caratteri");
        document.invio.password.focus();
        return false;
      }

      // Effettua il controllo sul campo CONFERMA PASSWORD
      if (!conferma) {
        alert("Devi confermare la password");
        document.invio.conferma.focus();
        return false;
      }

      if (password !== conferma) {
        alert("La conferma password non corrisponde");
        document.invio.conferma.value = "";
        document.invio.conferma.focus();
        return false;
      } else {
        document.invio.action = "#";
        document.invio.submit();
      }
    }

Innanzitutto dichiariamo le variabili utilizzando const per associare i valori dei campi di input del modulo alle variabili corrispondenti. Poi viene definita un'espressione regolare per validare l'indirizzo email. Questa espressione regolare controlla se l'email è nel formato corretto.

Quindi effettuiamo i controlli iniziando dal campo nome. Controlliamo dunque se il campo "nome" è vuoto o non definito. Se è il caso, mostra un avviso, mette il fuoco sul campo "nome" e restituisce false per evitare l'invio del modulo.

Dopo controlliamo se il campo "telefono" contiene un valore numerico. Se non è numerico o è vuoto, mostra un avviso, pulisce il campo e restituisce false.

Poi utilizzamo l'espressione regolare per verificare se il campo "email" è nel formato corretto. Se non è corretto o è vuoto, mostra un avviso e restituisce false.

Dunque controlliamo se il campo "password" ha almeno 6 caratteri. Se non lo ha o è vuoto, mostra un avviso e restituisce false.

Controlliamo poi se il campo "Conferma Password" è vuoto. Se è il caso, mostra un avviso, mette il fuoco sul campo e restituisce false. Inoltre controlliamo se il campo "Password" e il campo "Conferma Password" corrispondono. Se non corrispondono, si mostra un avviso, puliamo il campo "Conferma Password", mettiamo il fuoco su di esso e restituiamo false.

Infine se tutte le validazioni sono superate con successo, imposta l'azione del modulo su "#" (può essere modificato con l'URL desiderato) e invia il modulo.

Conclusione

In questa lezione abbiamo visto come validare un form in JavaScript in maniera molto semplice, si potrebbero aggiungere altri controlli, ad esempio controllando la lunghezza del campo telefono o dando dei suggerimenti per la scelta della password, ecc.

Alcuni link utili

Corso linguaggio JavaScript

Libro JavaScript

Tutorial JavaScript

Come utilizzare JavaScript alert

Utilizzare JavaScript prompt

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array