0Pricing
HTML Academy · Lezione

L’attributo novalidate

Disabilitare la convalida del browser quando la si gestisce autonomamente

L’attributo novalidate è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 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 HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Limitazioni della validazione del browser

La validazione integrata di HTML5 presenta alcune limitazioni:

  • I messaggi di errore dipendono dal browser e sono difficili da personalizzare con gli stili
  • La validazione viene eseguita solo all'invio, non quando si abbandona il campo o durante l'inserimento
  • Le regole aziendali complesse (corrispondenza delle password, nome utente univoco) sono impossibili da implementare

Quando Le serve il pieno controllo, disabiliti la validazione integrata con novalidate.

novalidate nel form

Aggiungere novalidate a un form disabilita tutta la validazione del browser:

<form action="/register" method="post" novalidate>
  <!-- Browser will NOT validate these on submit -->
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="8" required>
  <button type="submit">Register</button>
</form>

Perché usare novalidate?

Motivi comuni per disabilitare la validazione del browser:

  • Personalizzare lo stile dei messaggi di errore in base al design system
  • Validazione in tempo reale (quando si abbandona il campo o durante l'inserimento, non solo all'invio)
  • Validazione di più campi (ad esempio, conferma della password)
  • Visualizzazione degli errori del server dopo un redirect
  • Librerie di validazione di terze parti (Zod, Yup, React Hook Form)

Pattern di validazione personalizzata

Costruisca una validazione personalizzata con novalidate:

<form id="form" novalidate>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <span class="error" id="email-error" role="alert" hidden></span>

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

<script>
document.getElementById('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email');
  const error = document.getElementById('email-error');

  if (!email.value || !email.value.includes('@')) {
    error.textContent = 'Please enter a valid email address.';
    error.hidden = false;
    email.focus();
  } else {
    error.hidden = true;
    // Submit...
  }
});
</script>

formnovalidate sul pulsante

Disabiliti la validazione per uno specifico pulsante di invio senza usare novalidate sull'intero form:

<form action="/save" method="post">
  <input type="email" name="email" required>

  <!-- Save as draft: skip validation -->
  <button type="submit" formaction="/save-draft" formnovalidate>
    Save Draft
  </button>

  <!-- Final submit: normal validation -->
  <button type="submit">Submit</button>
</form>

Stile degli errori personalizzati

Stile per gli errori di validazione personalizzati:

.field-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

input.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

input.valid {
  border-color: #22c55e;
}

Errori personalizzati accessibili

Renda accessibili i messaggi di errore personalizzati:

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  aria-describedby="email-error"
  aria-invalid="false"
>
<span id="email-error" role="alert"></span>
<!-- aria-invalid="true" when invalid -->
<!-- role="alert" announces changes to screen readers -->
<!-- aria-describedby links the input to its error message -->

Strategie per i tempi di validazione

Quando eseguire la validazione con novalidate:

  • All'invio — la soluzione più semplice; valida tutto in una volta
  • Quando si abbandona il campo — valida ogni campo quando l'utente lo lascia
  • Durante l'inserimento — in tempo reale; offre la migliore UX, ma può risultare invadente
  • Ibrida — valida quando si abbandona il campo e cancella gli errori durante l'inserimento

Pattern ibrido: quando si abbandona il campo + durante l'inserimento

L'approccio alla validazione più intuitivo per l'utente:

function validateEmail(input, errorEl) {
  const val = input.value.trim();
  if (!val) {
    showError(input, errorEl, 'Email is required.');
  } else if (!/^[^@]+@[^@]+\.[^@]+$/.test(val)) {
    showError(input, errorEl, 'Enter a valid email address.');
  } else {
    clearError(input, errorEl);
  }
}

input.addEventListener('blur', () => validateEmail(input, errorEl));
input.addEventListener('input', () => {
  // Only clear the error while typing, don't re-validate until blur
  if (input.classList.contains('invalid')) validateEmail(input, errorEl);
});

novalidate e validazione lato server

Esegua sempre anche la validazione lato server:

  • La validazione lato client serve per l'esperienza dell'utente
  • La validazione lato server serve per la sicurezza
  • Gli utenti possono aggirare la validazione HTML modificando le richieste
  • novalidate + validazione personalizzata in JavaScript devono rispecchiare le regole del server

Librerie di validazione

Librerie JavaScript di validazione diffuse che si abbinano a novalidate:

  • Zod — validazione degli schemi orientata innanzitutto a TypeScript
  • Yup — validazione degli schemi di oggetti
  • Valibot — libreria leggera per gli schemi
  • React Hook Form — stato del form e validazione per React

Testare la validazione personalizzata

Come testare la validazione personalizzata dei form:

  • Testi l'invio senza dati (campi obbligatori)
  • Testi un formato non valido (email errata, pattern del numero di telefono)
  • Testi i casi limite (solo spazi, Unicode, stringhe molto lunghe)
  • Testi con uno screen reader per verificare l'annuncio degli errori
  • Testi la navigazione da tastiera tra i campi dopo la visualizzazione degli errori

Verifica rapida

Che cosa fa formnovalidate su un pulsante?

Riepilogo: novalidate

Concetti essenziali di novalidate:

  • novalidate sul form — disabilita tutta la validazione del browser
  • formnovalidate sul pulsante — la disabilita solo per quell'invio
  • Utilizzi la validazione personalizzata per controllare la UX e gestire regole complesse
  • Valida sempre lato server — la validazione lato client può essere aggirata
  • Annunci gli errori in modo accessibile con role="alert" e aria-invalid

Domande Frequenti

La lezione «L’attributo novalidate» è gratuita?

Sì — il testo completo di «L’attributo novalidate» è 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 HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «L’attributo novalidate»?

Disabilitare la convalida del browser quando la si gestisce autonomamente Eserciti HTML 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 HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML 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 2 di 4.

Quanto tempo richiede la lezione «L’attributo novalidate»?

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 HTML Academy?

Sì. Ogni lezione HTML 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

  1. required pattern min max e maxlength
  2. L’attributo novalidate
  3. Nozioni di base sulla Constraint Validation API
  4. Convalida HTML5 e JavaScript a confronto
← Torna a HTML Academy