0Pricing
HTML Academy · Lektion

Das novalidate-Attribut

Deaktivieren Sie die Browservalidierung, wenn Sie diese selbst übernehmen

Das novalidate-Attribut ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Einschränkungen der Browservalidierung

Die integrierte HTML5-Validierung hat einige Einschränkungen:

  • Fehlermeldungen hängen vom Browser ab und lassen sich nur schwer gestalten
  • Die Validierung wird nur beim Absenden ausgeführt, nicht bei blur oder input
  • Komplexe Geschäftsregeln (Passwortabgleich, eindeutiger Benutzername) sind nicht möglich

Wenn Sie die vollständige Kontrolle benötigen, deaktivieren Sie die integrierte Validierung mit novalidate.

novalidate im Formular

Wenn Sie einem Formular novalidate hinzufügen, wird die gesamte Browservalidierung deaktiviert:

<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>

Warum novalidate verwenden?

Häufige Gründe, die Browservalidierung zu deaktivieren:

  • Individuelle Gestaltung von Fehlermeldungen passend zu Ihrem Designsystem
  • Echtzeitvalidierung (bei blur/input statt nur beim Absenden)
  • Validierung mehrerer Felder (z. B. Passwortbestätigung)
  • Anzeige serverseitiger Fehler nach einer Weiterleitung
  • Validierungsbibliotheken von Drittanbietern (Zod, Yup, React Hook Form)

Muster für individuelle Validierung

Erstellen Sie mit novalidate eine individuelle Validierung:

<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 auf einem Button

Deaktivieren Sie die Validierung für einen bestimmten Submit-Button, ohne novalidate für das gesamte Formular zu verwenden:

<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>

Individuelle Fehler gestalten

Gestaltung individueller Validierungsfehler:

.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;
}

Barrierefreie individuelle Fehler

Machen Sie individuelle Fehlermeldungen barrierefrei:

<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 -->

Strategien für den Validierungszeitpunkt

Wann Sie mit novalidate validieren sollten:

  • Beim Absenden — am einfachsten; alle Felder auf einmal validieren
  • Bei blur — jedes Feld validieren, sobald der Benutzer es verlässt
  • Bei input — in Echtzeit; bietet die beste UX, kann aber aufdringlich wirken
  • Hybrid — bei blur validieren, Fehler bei input entfernen

Hybrides Muster aus blur und input

Der benutzerfreundlichste Ansatz für die Validierung:

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 und serverseitige Validierung

Führen Sie zusätzlich immer eine serverseitige Validierung durch:

  • Die clientseitige Validierung dient der Benutzerfreundlichkeit
  • Die serverseitige Validierung dient der Sicherheit
  • Benutzer können die HTML-Validierung umgehen, indem sie Anfragen verändern
  • novalidate und die individuelle JS-Validierung sollten dieselben Serverregeln abbilden

Validierungsbibliotheken

Beliebte JavaScript-Validierungsbibliotheken, die sich mit novalidate kombinieren lassen:

  • Zod — schema-basierte Validierung mit Fokus auf TypeScript
  • Yup — Validierung von Objektschemas
  • Valibot — leichtgewichtige Schema-Bibliothek
  • React Hook Form — Formularstatus und Validierung für React

Individuelle Validierung testen

So testen Sie eine individuelle Formularvalidierung:

  • Testen Sie das Absenden mit leeren Feldern (Pflichtfelder)
  • Testen Sie ungültige Formate (falsche E-Mail-Adresse, falsches Telefonmuster)
  • Testen Sie Sonderfälle (nur Leerzeichen, Unicode, sehr lange Zeichenfolgen)
  • Testen Sie mit einem Screenreader, ob Fehlerankündigungen korrekt ausgegeben werden
  • Testen Sie die Tastaturnavigation zwischen Feldern, nachdem Fehler angezeigt wurden

Schnelltest

Was bewirkt formnovalidate auf einem Button?

Zusammenfassung: novalidate

Das Wichtigste zu novalidate:

  • novalidate im Formular — deaktiviert die gesamte Browservalidierung
  • formnovalidate auf einem Button — deaktiviert die Validierung nur für dieses Absenden
  • Verwenden Sie individuelle Validierung für die Kontrolle über die UX und für komplexe Regeln
  • Validieren Sie immer serverseitig — die clientseitige Validierung kann umgangen werden
  • Geben Sie Fehler barrierefrei mit role="alert" und aria-invalid bekannt

Häufig gestellte Fragen

Ist die Lektion „Das novalidate-Attribut“ kostenlos?

Ja — der vollständige Text von „Das novalidate-Attribut“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Das novalidate-Attribut“?

Deaktivieren Sie die Browservalidierung, wenn Sie diese selbst übernehmen Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Das novalidate-Attribut“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. required pattern min max und maxlength
  2. Das novalidate-Attribut
  3. Grundlagen der Constraint Validation API
  4. HTML5- gegenüber JavaScript-Validierung
← Zurück zu HTML Academy