Form e Validazione

Bentornato.

Nella lezione precedente hai imparato gli eventi.

Gli eventi aiutano JavaScript a reagire a click, digitazione, form e altre azioni dell’utente.

Molto utile.

Molto interattivo.

Molto “finalmente il pulsante fa qualcosa.”

Oggi continuiamo con una delle parti più importanti dello sviluppo web.

I form.

I form sono ovunque.

Form di contatto.

Form di login.

Campi di ricerca.

Iscrizioni alla newsletter.

Checkout.

Piccole caselle dove gli utenti scrivono il loro destino.

Ma gli utenti sono creativi.

Molto creativi.

Se chiedi un’email, qualcuno scriverà:

banana

Se chiedi un nome, qualcuno non scriverà niente.

Se chiedi una password, qualcuno scriverà:

E poi sarà sorpreso quando il sito dice no.

Per questo ci serve la validazione.

Validazione significa controllare i dati dell’utente prima di accettarli.

JavaScript ci aiuta a guidare l’utente prima di mandare i dati da qualche parte.

Come una guardia di sicurezza gentile.

Ma con i punto e virgola.

Cosa Imparerai

In questa lezione imparerai:

come funzionano i form in HTML;
come selezionare gli input;
come leggere i valori degli input;
come validare campi vuoti;
come validare un’email;
come validare la lunghezza della password;
come mostrare messaggi di errore;
come mostrare messaggi di successo;
come usare funzioni helper;
come costruire un form di registrazione.

Alla fine di questa lezione saprai creare form che controllano i dati prima dell’invio.

Questo è un grande passo.

Perché form senza validazione sono come porte senza maniglie.

Tecnicamente presenti.

Emotivamente confuse.

Che Cos'è la Validazione di un Form?

La validazione di un form significa controllare se i dati inseriti dall’utente sono accettabili.

Esempio:

Il nome non deve essere vuoto.
L’email deve sembrare un’email.
La password deve essere abbastanza lunga.
Il messaggio deve contenere testo.

La validazione può avvenire in due posti:

nel browser con JavaScript;
sul server con codice backend.

In questa lezione ci concentriamo sulla validazione frontend con JavaScript.

Importante:

La validazione frontend migliora l’esperienza utente.

Ma non basta per la sicurezza.

Le applicazioni reali devono validare i dati anche nel backend.

Non fidarti mai solo del browser.

Il browser vive sul computer dell’utente.

E gli utenti hanno pulsanti.

Pulsanti pericolosi.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir javascript-lesson9
cd javascript-lesson9
touch index.html
touch script.js

Il progetto dovrebbe essere così:

javascript-lesson9/
  index.html
  script.js

Apri la cartella nel tuo editor.

Oggi costruiremo un form, lo valideremo e mostreremo messaggi.

Piccolo progetto.

Grande lezione.

Il form è pronto.

Il caos aspetta.

Scrivi l'HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form e Validazione</title>
</head>
<body>
  <h1>Form e Validazione</h1>

  <form id="signupForm">
    <label for="nameInput">Nome</label>
    <input id="nameInput" type="text" placeholder="Il tuo nome">

    <label for="emailInput">Email</label>
    <input id="emailInput" type="email" placeholder="tu@example.com">

    <label for="passwordInput">Password</label>
    <input id="passwordInput" type="password" placeholder="Almeno 6 caratteri">

    <button type="submit">Registrati</button>
  </form>

  <p id="message">Compila il form e invialo.</p>

  <script src="script.js"></script>
</body>
</html>

Questo ci dà:

un form;
un input per il nome;
un input per l’email;
un input per la password;
un pulsante submit;
un’area messaggio.

Semplice.

Pulito.

Pronto a giudicare educatamente i dati dell’utente.

Selezionare il Form e gli Input

Apri script.js e aggiungi:

const signupForm = document.getElementById("signupForm");
const nameInput = document.getElementById("nameInput");
const emailInput = document.getElementById("emailInput");
const passwordInput = document.getElementById("passwordInput");
const messageElement = document.getElementById("message");

Ora JavaScript può accedere al form e agli input.

Queste variabili rappresentano elementi HTML.

Ma ricorda:

L’elemento input non è la stessa cosa del valore dentro l’input.

Questo:

nameInput

è l’elemento input.

Questo:

nameInput.value

è ciò che l’utente ha scritto.

Scatola.

Contenuto.

Cose diverse.

Come scatola della pizza e pizza.

Non mangiare la scatola.

Gestire il Submit del Form

Ora aggiungiamo un event listener per il submit.

function handleSignup(event) {
  event.preventDefault();

  console.log("Form inviato!");
}

signupForm.addEventListener("submit", handleSignup);

Aggiorna il browser.

Invia il form.

La pagina non dovrebbe ricaricarsi.

La console dovrebbe mostrare:

Form inviato!

Perché la pagina non si ricarica?

Perché abbiamo usato:

event.preventDefault();

Di default, i form ricaricano la pagina quando vengono inviati.

Ma noi vogliamo che JavaScript gestisca il form.

Quindi fermiamo il comportamento predefinito.

Senza preventDefault, la pagina si ricarica, il messaggio sparisce e la tua fiducia va a fare una passeggiata.

Leggere i Valori degli Input

Ora leggiamo i valori.

Aggiorna handleSignup:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value;
  const email = emailInput.value;
  const password = passwordInput.value;

  console.log(name);
  console.log(email);
  console.log(password);
}

Scrivi qualcosa nel form e invialo.

Dovresti vedere i valori nella console.

Questo è lo schema base:

const value = input.value;

Molto comune.

Molto importante.

Molto facile da dimenticare quando il cervello sta debuggando cinque cose insieme.

Validare Campi Vuoti

La prima regola di validazione è semplice.

I campi non devono essere vuoti.

Aggiorna handleSignup:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value;
  const email = emailInput.value;
  const password = passwordInput.value;

  if (name === "" || email === "" || password === "") {
    messageElement.textContent = "Compila tutti i campi.";
    return;
  }

  messageElement.textContent = "Il form sembra corretto!";
}

Ora invia il form vuoto.

Dovresti vedere:

Compila tutti i campi.

Il return è importante.

Ferma la funzione.

Se il form non è valido, mostriamo l’errore e ci fermiamo.

Non serve continuare.

Come vedere fumo in cucina e decidere di non preparare una torta proprio adesso.

Saggio.

Eliminare gli Spazi Vuoti con trim

C’è un problema.

Un utente può scrivere solo spazi:

Tecnicamente non è una stringa vuota.

Ma non è nemmeno un vero nome.

Quindi usiamo .trim().

Esempio:

const name = nameInput.value.trim();

.trim() rimuove gli spazi dall’inizio e dalla fine di una stringa.

Aggiorna il codice:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    messageElement.textContent = "Compila tutti i campi.";
    return;
  }

  messageElement.textContent = "Il form sembra corretto!";
}

Ora solo spazi non superano la validazione.

Bene.

Gli utenti sono creativi.

Ma noi stiamo imparando.

Validare l'Email

Un controllo email semplice può usare .includes().

Esempio:

if (!email.includes("@")) {
  messageElement.textContent = "Inserisci un’email valida.";
  return;
}

Questa non è una validazione email perfetta.

La validazione email può diventare sorprendentemente complicata.

Molto complicata.

Come aprire un cassetto e trovare un altro cassetto dentro.

Per principianti, controllare @ basta per capire l’idea.

Aggiorna la funzione:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    messageElement.textContent = "Compila tutti i campi.";
    return;
  }

  if (!email.includes("@")) {
    messageElement.textContent = "Inserisci un’email valida.";
    return;
  }

  messageElement.textContent = "Il form sembra corretto!";
}

Ora se l’utente scrive:

banana

JavaScript dice no.

Educatamente.

Ma con fermezza.

Validare la Lunghezza della Password

Ora controlliamo la lunghezza della password.

Esempio:

if (password.length < 6) {
  messageElement.textContent = "La password deve avere almeno 6 caratteri.";
  return;
}

Aggiungiamolo alla funzione:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    messageElement.textContent = "Compila tutti i campi.";
    return;
  }

  if (!email.includes("@")) {
    messageElement.textContent = "Inserisci un’email valida.";
    return;
  }

  if (password.length < 6) {
    messageElement.textContent = "La password deve avere almeno 6 caratteri.";
    return;
  }

  messageElement.textContent = "Il form sembra corretto!";
}

Ora il form controlla:

campi vuoti;
formato email;
lunghezza password.

È già utile.

Non perfetto.

Ma utile.

Come una sedia con tutte e quattro le gambe.

Un buon inizio.

Aggiungere Stili Migliori

Ora rendiamo il form più bello.

Aggiorna index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form e Validazione</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    label {
      display: block;
      margin-top: 16px;
      font-weight: 700;
    }

    input {
      width: 100%;
      margin-top: 8px;
      padding: 12px;
      border: 2px solid #d1d5db;
      border-radius: 12px;
      font-size: 18px;
      box-sizing: border-box;
    }

    button {
      margin-top: 18px;
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background-color: #1d4ed8;
    }

    .message {
      margin-top: 20px;
      padding: 16px;
      border-radius: 14px;
      background-color: #eff6ff;
      border: 2px solid #bfdbfe;
    }

    .error {
      background-color: #fef2f2;
      border-color: #fecaca;
      color: #991b1b;
    }

    .success {
      background-color: #ecfdf5;
      border-color: #bbf7d0;
      color: #166534;
    }
  </style>
</head>
<body>
  <h1>Form e Validazione</h1>

  <div class="card">
    <form id="signupForm">
      <label for="nameInput">Nome</label>
      <input id="nameInput" type="text" placeholder="Il tuo nome">

      <label for="emailInput">Email</label>
      <input id="emailInput" type="email" placeholder="tu@example.com">

      <label for="passwordInput">Password</label>
      <input id="passwordInput" type="password" placeholder="Almeno 6 caratteri">

      <button type="submit">Registrati</button>
    </form>

    <p id="message" class="message">Compila il form e invialo.</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

Ora il form sembra appartenere a un sito.

Non a un documento del 1998.

Progresso.

Creare Funzioni Helper

La nostra validazione funziona.

Ma ripetiamo spesso questa riga:

messageElement.textContent = "...";

Creiamo una funzione helper.

Aggiorna script.js:

const signupForm = document.getElementById("signupForm");
const nameInput = document.getElementById("nameInput");
const emailInput = document.getElementById("emailInput");
const passwordInput = document.getElementById("passwordInput");
const messageElement = document.getElementById("message");

function showMessage(text, type) {
  messageElement.textContent = text;
  messageElement.className = `message ${type}`;
}

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    showMessage("Compila tutti i campi.", "error");
    return;
  }

  if (!email.includes("@")) {
    showMessage("Inserisci un’email valida.", "error");
    return;
  }

  if (password.length < 6) {
    showMessage("La password deve avere almeno 6 caratteri.", "error");
    return;
  }

  showMessage(`Benvenuto, ${name}! I dati sembrano validi.`, "success");
}

signupForm.addEventListener("submit", handleSignup);

Molto più pulito.

Ora questo:

showMessage("Compila tutti i campi.", "error");

aggiorna sia il testo sia lo stile.

Le funzioni helper aiutano a evitare ripetizione.

E la ripetizione nel codice è come i calzini che spariscono in lavatrice.

All’inizio fa ridere.

Poi diventa un problema di stile di vita.

Svuotare gli Input Dopo il Successo

Se il form è valido, possiamo svuotare gli input.

Aggiungi questo dopo il messaggio di successo:

nameInput.value = "";
emailInput.value = "";
passwordInput.value = "";

Parte finale completa:

showMessage(`Benvenuto, ${name}! I dati sembrano validi.`, "success");

nameInput.value = "";
emailInput.value = "";
passwordInput.value = "";

Ora dopo un invio corretto, il form torna vuoto.

Questo è uno schema comune.

Invia.

Mostra messaggio.

Svuota campi.

Comportamento civile.

Molto raro nei form costruiti male.

Codice JavaScript Completo

Ecco il script.js completo:

const signupForm = document.getElementById("signupForm");
const nameInput = document.getElementById("nameInput");
const emailInput = document.getElementById("emailInput");
const passwordInput = document.getElementById("passwordInput");
const messageElement = document.getElementById("message");

function showMessage(text, type) {
  messageElement.textContent = text;
  messageElement.className = `message ${type}`;
}

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    showMessage("Compila tutti i campi.", "error");
    return;
  }

  if (!email.includes("@")) {
    showMessage("Inserisci un’email valida.", "error");
    return;
  }

  if (password.length < 6) {
    showMessage("La password deve avere almeno 6 caratteri.", "error");
    return;
  }

  showMessage(`Benvenuto, ${name}! I dati sembrano validi.`, "success");

  nameInput.value = "";
  emailInput.value = "";
  passwordInput.value = "";
}

signupForm.addEventListener("submit", handleSignup);

Questo ora è un vero form interattivo.

Legge input.

Controlla dati.

Mostra messaggi.

Svuota campi.

Niente backend ancora.

Niente database ancora.

Niente draghi server ancora.

Ma questo è comportamento frontend reale.

Errori Comuni

Dimenticare preventDefault

Sbagliato:

function handleSignup(event) {
  const name = nameInput.value;
}

Corretto:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value;
}

Senza preventDefault, la pagina può ricaricarsi.

Poi il messaggio JavaScript sparisce.

Poi accusi il computer.

Poi ti ricordi la riga mancante.

Dimenticare .value

Sbagliato:

const email = emailInput;

Corretto:

const email = emailInput.value;

L’elemento input è la scatola.

Il valore è ciò che l’utente ha scritto.

Non validare la scatola.

Valida il contenuto.

Regola della pizza di nuovo.

Dimenticare return

Sbagliato:

if (password.length < 6) {
  showMessage("Password troppo corta.", "error");
}

showMessage("Successo!", "success");

Questo mostra errore e poi successo.

Confusione.

Corretto:

if (password.length < 6) {
  showMessage("Password troppo corta.", "error");
  return;
}

showMessage("Successo!", "success");

return ferma la funzione.

Molto utile.

Molto sottovalutato.

Come dormire.

Controllare l'Email in Modo Troppo Semplice

Questo è semplice:

email.includes("@")

Va bene per imparare.

Ma la validazione reale delle email è più complessa.

Per ora l’obiettivo è capire la logica della validazione.

Non diventare ministro internazionale dei formati email.

Pratica

Crea un form di contatto con:

nome;
email;
messaggio.

Regole:

il nome non deve essere vuoto;
l’email deve contenere @;
il messaggio deve avere almeno 10 caratteri.

Mostra errori quando qualcosa non va.

Mostra un messaggio di successo quando tutto è corretto.

Esempio:

Grazie! Il tuo messaggio è pronto per essere inviato.

Ricorda:

Questo non invia davvero il messaggio.

Valida solo il form.

Comunque utile.

Comunque importante.

Comunque frontend.

Mini Challenge

Crea un form di conferma password.

Il form deve avere:

input password;
input conferma password;
pulsante submit;
area messaggio.

Regole:

la password non deve essere vuota;
la password deve avere almeno 6 caratteri;
la conferma deve essere uguale alla password.

Se tutto è corretto, mostra:

Password confermata.

Altrimenti mostra un errore utile.

Questo è molto comune nei siti reali.

Gli utenti spesso scrivono la password due volte.

Perché evidentemente un campo password non era abbastanza pressione emotiva.

Riepilogo

Oggi hai imparato:

i form raccolgono input dell’utente;
JavaScript può leggere valori con .value;
l’invio dei form può essere gestito con submit;
preventDefault ferma il reload della pagina;
la validazione controlla se i dati sono accettabili;
.trim() rimuove spazi extra;
campi vuoti si controllano con === "";
l’email può essere controllata con condizioni semplici;
la lunghezza password si controlla con .length;
le funzioni helper riducono ripetizione;
messaggi di errore e successo migliorano l’esperienza utente.

Questo è un grande passo.

I form sono ovunque.

La validazione è ovunque.

Gli utenti scrivono cose strane ovunque.

JavaScript ci aiuta a portare ordine.

Non ordine perfetto.

Ma abbastanza ordine per sopravvivere.

Prossima Lezione

Nella prossima lezione impareremo local storage.

Local storage permette a JavaScript di salvare dati nel browser.

Questo significa che la pagina può ricordare cose anche dopo il refresh.

Attività.

Impostazioni.

Nomi.

Piccoli pezzi di dati.

Finalmente JavaScript ottiene una piccola memoria.

Pericoloso.

Ma utile.