HTMLButtonElement.formNoValidate — Eigenschaft · JavaScript-Referenz

Signatur

HTMLButtonElement.formNoValidate

Beschreibung

Die Eigenschaft formNoValidate eines <button>-Elements spiegelt das Inhaltsattribut formnovalidate. Steht sie auf true, übergeht der Browser beim Absenden über genau diesen Button die eingebaute Einschränkungsvalidierung (required, pattern, min/max, type="email" usw.). Das Formular wird also auch dann gesendet, wenn Felder ungültig sind.

Typische Anwendungsfälle sind Buttons wie „Entwurf speichern“, „Zurück“ oder „Abbrechen“, die zwar das Formular senden, aber keine vollständigen oder gültigen Eingaben voraussetzen. Der Haupt-Button („Absenden“) validiert weiterhin normal.

Die Eigenschaft überschreibt für diesen Button das Attribut novalidate des zugehörigen <form>-Elements nur in eine Richtung: Sie kann die Validierung abschalten, aber nicht erzwingen, wenn das Formular selbst novalidate trägt. Sie wirkt nur bei Buttons vom Typ submit (Standard) – bei type="button" oder type="reset" hat sie keine Wirkung.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut formnovalidate vorhanden ist, sonst false. Beim Setzen wird das Attribut hinzugefügt bzw. entfernt.

Beispiele

Wert auslesen

// HTML: <form><input required name="titel"><button id="entwurf" formnovalidate>Entwurf speichern</button></form>
const entwurfBtn = document.querySelector('#entwurf');
console.log(entwurfBtn.formNoValidate);

true

„Entwurf speichern“-Button dynamisch erzeugen

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

const draftBtn = document.createElement('button');
draftBtn.type = 'submit';
draftBtn.name = 'aktion';
draftBtn.value = 'entwurf';
draftBtn.textContent = 'Entwurf speichern';
draftBtn.formNoValidate = true; // Pflichtfelder werden ignoriert

form.append(draftBtn);
console.log(draftBtn.hasAttribute('formnovalidate'));

true

Validierung per Checkbox umschalten

const submitBtn = document.querySelector('#senden');
const skipCheckbox = document.querySelector('#ohne-pruefung');

skipCheckbox.addEventListener('change', () => {
  submitBtn.formNoValidate = skipCheckbox.checked;
  console.log(`Validierung übersprungen: ${submitBtn.formNoValidate}`);
});

Validierung übersprungen: true

Auf dem Server/Handler erkennen, welcher Button sendete

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

form.addEventListener('submit', (event) => {
  const button = event.submitter;
  if (button?.formNoValidate) {
    console.log('Entwurf – ohne Validierung gesendet');
  } else {
    console.log('Reguläres, validiertes Absenden');
  }
});

Entwurf – ohne Validierung gesendet

// Wichtig · Fallstricke

Keine Sicherheitsfunktion: Clientseitige Validierung lässt sich jederzeit umgehen – Daten müssen immer serverseitig geprüft werden.
Umgangen wird nur die interaktive Validierung beim Absenden. Aufrufe von form.checkValidity() oder reportValidity() sowie die CSS-Pseudoklassen :invalid/:valid funktionieren unverändert.
form.requestSubmit(button) berücksichtigt formNoValidate des übergebenen Buttons; form.submit() validiert ohnehin nie.
Nur bei Submit-Buttons wirksam; für <input type=\"submit\"> gibt es die gleichnamige Eigenschaft auf HTMLInputElement.
Das Setzen eines beliebigen Strings (z. B. \"false\") wird in true umgewandelt – immer echte boolesche Werte verwenden.
Kompatibilität: von allen modernen Browsern unterstützt (seit Jahren Baseline).

Siehe auch

HTMLButtonElement.formAction HTMLButtonElement.willValidate HTMLButtonElement.formTarget HTMLButtonElement.validity HTMLButtonElement.formEnctype