HTMLFormElement.noValidate — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFormElement.noValidate

Beschreibung

Die Eigenschaft noValidate des HTMLFormElement-Interfaces spiegelt das HTML-Attribut novalidate wider. Ist sie true, prüft der Browser beim Absenden des Formulars die Einschränkungen der Felder nicht. Betroffen sind required, pattern, min/max, step, minlength/maxlength und die Typprüfung bei type="email" oder type="url". Die eingebauten Fehlerhinweise des Browsers (Sprechblasen) erscheinen dann ebenfalls nicht, und das invalid-Event wird beim Absenden nicht ausgelöst.

Typische Einsatzfälle:

Eigene Validierungsoberflächen: Fehlermeldungen sollen selbst gestaltet, gesammelt oder barrierefrei angezeigt werden.
Entwurfsfunktionen: Beim „Als Entwurf speichern“ sind unvollständige Daten erlaubt.
Progressive Verbesserung: Ohne JavaScript validiert der Browser. Sobald das Skript geladen ist, wird noValidate gesetzt und die eigene Logik übernimmt.

Wichtig: noValidate schaltet nur die automatische Prüfung beim Absenden ab. Die Constraint-Validation-API bleibt voll nutzbar: form.checkValidity(), form.reportValidity(), input.validity, setCustomValidity() sowie die CSS-Pseudoklassen :invalid/:valid funktionieren weiterhin.

Für einzelne Absende-Schaltflächen gibt es das Gegenstück formnovalidate (bzw. HTMLButtonElement.formNoValidate). Damit lässt sich die Validierung gezielt nur für einen bestimmten Button überspringen, etwa für „Entwurf speichern“.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Beim Setzen: `true` fügt das Attribut `novalidate` hinzu, `false` entfernt es. Andere Werte werden in einen booleschen Wert umgewandelt.

Beispiele

Attribut lesen und umschalten

// HTML: <form id="kontakt" novalidate>...</form>
const form = document.querySelector('#kontakt');

console.log(form.noValidate);                 // true
form.noValidate = false;
console.log(form.hasAttribute('novalidate')); // false

true false

Progressive Verbesserung mit eigener Fehleranzeige

// HTML:
// <form id="anmeldung">
//   <input name="email" type="email" required>
//   <span class="fehler" aria-live="polite"></span>
//   <button>Absenden</button>
// </form>
const form = document.querySelector('#anmeldung');

// Browser-Sprechblasen abschalten – JS übernimmt ab jetzt
form.noValidate = true;

form.addEventListener('submit', (event) => {
  const email = form.elements.email;
  const fehler = form.querySelector('.fehler');

  if (!form.checkValidity()) {
    event.preventDefault();
    fehler.textContent = email.validity.valueMissing
      ? 'Bitte eine E-Mail-Adresse eingeben.'
      : 'Die E-Mail-Adresse ist ungültig.';
    email.focus();
    return;
  }
  fehler.textContent = '';
});

Entwurf speichern ohne Validierung, Absenden mit Validierung

const form = document.querySelector('#artikel');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const istEntwurf = event.submitter?.value === 'entwurf';

  // Beim Entwurf keine Prüfung, sonst Browser-Hinweise anzeigen
  if (!istEntwurf && !form.reportValidity()) return;

  const antwort = await fetch('/api/artikel', {
    method: 'POST',
    body: new FormData(form),
  });
  console.log(istEntwurf ? 'Entwurf gespeichert' : 'Veröffentlicht', antwort.status);
});

// Validierung beim Absenden selbst steuern
form.noValidate = true;

Entwurf gespeichert 200

Wirkung auf checkValidity() prüfen

const form = document.createElement('form');
const input = document.createElement('input');
input.required = true;
form.append(input);

form.noValidate = true;
// Die API funktioniert unabhängig von noValidate
console.log(form.checkValidity());       // false
console.log(input.validity.valueMissing); // true

false true

// Wichtig · Fallstricke

Keine Sicherheitsfunktion: Clientseitige Validierung lässt sich immer umgehen (DevTools, direkte HTTP-Anfragen). Daten müssen immer serverseitig geprüft werden – egal ob noValidate gesetzt ist oder nicht.
form.submit() validiert nie: Der programmatische Aufruf von submit() überspringt die Validierung und das submit-Event unabhängig von noValidate. form.requestSubmit() dagegen validiert (sofern noValidate nicht gesetzt ist) und löst submit aus.
Button-Ebene hat Vorrang nur in eine Richtung: formnovalidate an einem Button kann die Validierung zusätzlich abschalten, aber ein Button kann die Validierung nicht erzwingen, wenn das Formular novalidate trägt.
CSS-Pseudoklassen bleiben aktiv: :invalid greift weiterhin, auch vor jeder Nutzereingabe. Für nutzerfreundliche Stile besser :user-invalid verwenden (in modernen Browsern verfügbar).
Barrierefreiheit: Wer die Browser-Hinweise abschaltet, muss selbst für zugängliche Fehlermeldungen sorgen (aria-invalid, aria-describedby, aria-live, Fokus auf das erste fehlerhafte Feld).
Kompatibilität: In allen modernen Browsern unterstützt (ab IE 10). Das Attribut ist ein boolesches Attribut – novalidate="false" im HTML deaktiviert die Validierung trotzdem.

Siehe auch

HTMLFormElement.name HTMLFormElement.relList HTMLFormElement.length HTMLFormElement.target HTMLFormElement.action