JavaScript Academy · Lezione

Validazione lato client

Convalidi l'input prima di inviarlo altrove.

Validazione lato client è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Perché validare sul client

La validazione lato client fornisce un feedback immediato e un'esperienza più fluida. Tenga presente che è una comodità, non una misura di sicurezza: esegua sempre la validazione anche sul server.

Validare durante l'invio

Un approccio comune consiste nel controllare i campi quando il modulo viene inviato e nell'annullare l'invio se qualcosa non è valido.

form.addEventListener("submit", (e) => {
  if (!isValid()) {
    e.preventDefault();
  }
});

Controllare un campo obbligatorio

Rimuova gli spazi iniziali e finali dal valore e rifiuti l'input vuoto. La rimozione degli spazi impedisce di accettare stringhe composte solo da spazi.

function checkName() {
  const v = nameInput.value.trim();
  return v.length > 0;
}

Regole sulla lunghezza

Confronti la lunghezza del valore senza spazi iniziali e finali con i limiti minimo e massimo per campi come le password.

function checkPassword() {
  const v = passwordInput.value;
  return v.length >= 8 && v.length <= 64;
}

Corrispondenza dei pattern

Le espressioni regolari verificano formati come quelli degli indirizzi email. Mantenga semplici i pattern e li affianchi ai controlli sul server.

function checkEmail() {
  const v = emailInput.value.trim();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}

Mostrare i messaggi di errore

Mostri il feedback accanto al campo utilizzando un elemento dedicato agli errori e textContent per proteggersi dagli attacchi XSS.

function showError(field, msg) {
  const err = field.nextElementSibling;
  err.textContent = msg;
}

Cancellare gli errori

Reimposti il messaggio quando il campo diventa valido, così gli errori precedenti non rimangono visualizzati.

function clearError(field) {
  field.nextElementSibling.textContent = "";
}

Validazione in tempo reale

Esegua la validazione sull'evento input o blur per fornire un feedback in tempo reale mentre l'utente digita o abbandona un campo.

emailInput.addEventListener("blur", () => {
  if (!checkEmail()) showError(emailInput, "Invalid email");
  else clearError(emailInput);
});

Accessibilità con aria-invalid

Imposti aria-invalid e colleghi gli errori con aria-describedby, in modo che le tecnologie assistive annuncino i problemi.

emailInput.setAttribute("aria-invalid", "true");

Portare il focus sul primo errore

Quando l'invio non riesce, sposti il focus sul primo campo non valido, così gli utenti possono correggerlo immediatamente.

function focusFirstError(fields) {
  const bad = fields.find((f) => !f.valid);
  if (bad) bad.el.focus();
}

Validare anche lato server

La validazione lato client può essere aggirata disabilitando JavaScript o creando richieste personalizzate. Consideri il server come fonte autorevole.

Verifica rapida

Adotti una mentalità orientata alla sicurezza.

Riepilogo

La validazione manuale controlla i campi, ad esempio obbligatorietà, lunghezza e pattern, e annulla l'invio in caso di errore con preventDefault. Mostri e cancelli i messaggi in modo sicuro con textContent, esegua la validazione in tempo reale su input/blur, migliori l'accessibilità con aria-invalid e porti il focus sul primo errore. Ripeta sempre la validazione sul server.

Domande Frequenti

La lezione «Validazione lato client» è gratuita?

Sì — il testo completo di «Validazione lato client» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Validazione lato client»?

Convalidi l'input prima di inviarlo altrove. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Validazione lato client»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy