HTMLInputElement.formNoValidate — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.formNoValidate

Beschreibung

Die Eigenschaft formNoValidate des HTMLInputElement spiegelt das HTML-Attribut formnovalidate. Ist sie true, wird das zugehörige Formular ohne Einschränkungsvalidierung (Pflichtfelder, pattern, min/max, type="email" usw.) abgesendet, sofern das Absenden über genau dieses Element ausgelöst wird.

Wirksam ist die Eigenschaft nur bei Eingabeelementen, die ein Formular absenden können, also type="submit" und type="image". Bei anderen Typen lässt sie sich zwar setzen, hat aber keine Auswirkung.

Typische Einsatzfälle sind Buttons wie „Entwurf speichern“, „Abbrechen“ oder „Zurück“ in mehrstufigen Formularen: Das Formular soll hier gesendet werden, obwohl es noch unvollständig ist. Der Hauptbutton „Absenden“ validiert dagegen weiterhin ganz normal.

Die Eigenschaft überschreibt für diesen einen Button das Formular-Attribut novalidate bzw. HTMLFormElement.noValidate. Ist das Formular selbst schon auf noValidate gesetzt, wird ohnehin nicht validiert.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Beim Setzen: `true` fügt das Attribut `formnovalidate` hinzu, `false` entfernt es.

Beispiele

Wert auslesen

// HTML:
// <form id="profil">
//   <input name="email" type="email" required>
//   <input type="submit" id="senden" value="Absenden">
//   <input type="submit" id="entwurf" value="Entwurf speichern" formnovalidate>
// </form>

const senden = document.getElementById('senden');
const entwurf = document.getElementById('entwurf');

console.log(senden.formNoValidate);
console.log(entwurf.formNoValidate);

false true

„Entwurf speichern“-Button dynamisch anlegen

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

const entwurfBtn = document.createElement('input');
entwurfBtn.type = 'submit';
entwurfBtn.value = 'Entwurf speichern';
entwurfBtn.name = 'aktion';
entwurfBtn.formNoValidate = true; // Pflichtfelder werden ignoriert

form.append(entwurfBtn);
console.log(entwurfBtn.outerHTML);

Validierung per Checkbox umschalten (z. B. für Tests)

const submitBtn = document.querySelector('#senden');
const debugToggle = document.querySelector('#debug-ohne-validierung');

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

Validierung übersprungen: true

Auswertung des auslösenden Buttons im submit-Event

document.querySelector('#profil').addEventListener('submit', (event) => {
  const ausloeser = event.submitter; // Button, der das Absenden ausgelöst hat
  if (ausloeser?.formNoValidate) {
    console.log('Entwurf wird ohne Prüfung gespeichert');
  } else {
    console.log('Vollständige, validierte Übermittlung');
  }
});

Entwurf wird ohne Prüfung gespeichert

// Wichtig · Fallstricke

Nur für Absende-Buttons: Auswirkung hat die Eigenschaft nur bei type="submit" und type="image". Das Gegenstück für <button> ist HTMLButtonElement.formNoValidate.
Kein Sicherheitsmerkmal: Die Validierung im Browser lässt sich immer umgehen (DevTools, eigene Requests). Daten müssen serverseitig geprüft werden, gerade wenn Entwürfe unvollständig ankommen dürfen.
form.submit() validiert nie, egal welchen Wert formNoValidate hat. form.requestSubmit(button) berücksichtigt dagegen den formNoValidate-Wert des übergebenen Buttons.
Die Eigenschaft wirkt sich nur auf das Absenden aus: checkValidity() und reportValidity() prüfen trotzdem, und die Pseudoklassen :invalid/:valid werden weiter angewendet.
Die Browserunterstützung ist gut: Die Eigenschaft funktioniert in allen modernen Browsern (Chrome, Edge, Firefox, Safari).

Siehe auch

HTMLFormElement.noValidate HTMLInputElement.willValidate HTMLInputElement.formTarget HTMLInputElement.validity HTMLInputElement.formAction