HTMLButtonElement.willValidate — Eigenschaft · JavaScript-Referenz

Signatur

HTMLButtonElement.willValidate

Beschreibung

Die Eigenschaft willValidate gibt true zurück, wenn das <button>-Element ein Kandidat für die Constraint-Validierung ist. Andernfalls gibt sie false zurück. Nur Kandidaten werden bei form.checkValidity(), form.reportValidity() und beim Absenden des Formulars geprüft.

Ein Button ist von der Validierung ausgeschlossen (willValidate === false), wenn mindestens eine dieser Bedingungen zutrifft:

Sein type ist "button" oder "reset". Nur type="submit" (der Standardwert) ist validierbar.
Er ist deaktiviert, entweder über das eigene Attribut disabled oder über ein deaktiviertes <fieldset>, in dem er liegt.
Er liegt innerhalb eines <datalist>-Elements.

In der Praxis ist die Eigenschaft vor allem wichtig, wenn Sie mit setCustomValidity() eigene Fehlermeldungen an einen Submit-Button hängen. Das ist z. B. sinnvoll, um das Absenden bei einer ungültigen Geschäftslogik zu blockieren. Ist willValidate false, wird diese Meldung ignoriert. Außerdem eignet sich die Eigenschaft für eigene Validierungsroutinen, die alle Formularelemente durchlaufen und nicht validierbare Elemente überspringen sollen.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Button an der Constraint-Validierung teilnimmt, sonst false.

Beispiele

Validierbarkeit je nach Button-Typ prüfen

const form = document.createElement('form');
form.innerHTML = `
  <button id="senden">Senden</button>
  <button id="normal" type="button">Klick</button>
  <button id="zurueck" type="reset">Zurücksetzen</button>
  <button id="aus" type="submit" disabled>Aus</button>
`;
document.body.append(form);

for (const btn of form.querySelectorAll('button')) {
  console.log(`${btn.id}: ${btn.willValidate}`);
}

senden: true normal: false zurueck: false aus: false

Eigene Fehlermeldung am Submit-Button nur bei Kandidaten setzen

const form = document.querySelector('#bestellung');
const submitBtn = form.querySelector('button[type="submit"]');
const agb = form.querySelector('#agb');

const pruefeAgb = () => {
  if (!submitBtn.willValidate) return; // Button wird ohnehin nicht geprüft
  submitBtn.setCustomValidity(
    agb.checked ? '' : 'Bitte akzeptieren Sie zuerst die AGB.'
  );
};

agb.addEventListener('change', pruefeAgb);
pruefeAgb();

form.addEventListener('submit', (event) => {
  if (!form.reportValidity()) event.preventDefault();
});

Deaktiviertes fieldset schließt Buttons aus

const fieldset = document.createElement('fieldset');
const btn = document.createElement('button'); // type="submit" ist Standard
fieldset.append(btn);
document.body.append(fieldset);

console.log(btn.willValidate); // true
fieldset.disabled = true;
console.log(btn.willValidate); // false

true false

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie btn.willValidate = false wird still ignoriert. Im Strict Mode löst sie einen TypeError aus. Um einen Button auszuschließen, ändern Sie stattdessen type oder disabled.
Nicht mit Gültigkeit verwechseln: willValidate sagt nur, ob geprüft wird. Ob das Element gültig ist, steht in validity.valid bzw. ergibt sich aus checkValidity().
Ein Button ohne type-Attribut ist ein Submit-Button und damit standardmäßig ein Kandidat. Ein ungültiger type-Wert fällt ebenfalls auf "submit" zurück.
Ein Button muss nicht in einem <form> liegen, damit willValidate true ist.
Kompatibilität: Die Eigenschaft wird seit vielen Jahren von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

HTMLButtonElement.validity HTMLButtonElement.checkValidity() HTMLButtonElement.setCustomValidity() HTMLButtonElement.validationMessage HTMLInputElement.willValidate HTMLButtonElement HTMLButtonElement.formMethod