HTMLInputElement.willValidate — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.willValidate

Beschreibung

Die schreibgeschützte Eigenschaft willValidate gibt true zurück, wenn das Eingabefeld ein Kandidat für die Einschränkungsvalidierung ist. Nur dann werden Attribute wie required, pattern, min/max oder maxlength beim Absenden des Formulars bzw. bei checkValidity() ausgewertet.

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

Das Element hat das Attribut disabled oder liegt in einem deaktivierten <fieldset>.
Das Element hat das Attribut readonly.
Der type ist hidden, reset oder button.
Das Element hat einen <datalist>-Vorfahren.

Die Eigenschaft ist besonders nützlich, wenn man eigene Validierungslogik schreibt: Man kann so Felder überspringen, die der Browser ohnehin nicht prüft, und vermeidet widersprüchliche Fehlermeldungen. Beachte, dass willValidate nichts darüber aussagt, ob der aktuelle Wert gültig ist – dafür sind validity und checkValidity() zuständig.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element an der Einschränkungsvalidierung teilnimmt, sonst false.

Beispiele

willValidate für verschiedene Feldzustände prüfen

const form = document.createElement('form');
form.innerHTML = `
  <input id="name" required>
  <input id="code" readonly value="ABC">
  <input id="token" type="hidden" value="xyz">
  <input id="alt" disabled>
`;
document.body.append(form);

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

name: true code: false token: false alt: false

Eigene Validierung nur für prüfbare Felder

const validateForm = (form) => {
  const errors = [];
  for (const input of form.querySelectorAll('input')) {
    // Felder überspringen, die der Browser nicht validiert
    if (!input.willValidate) continue;
    if (!input.checkValidity()) {
      errors.push({ name: input.name, message: input.validationMessage });
    }
  }
  return errors;
};

const form = document.querySelector('#signup');
form.addEventListener('submit', (event) => {
  const errors = validateForm(form);
  if (errors.length > 0) {
    event.preventDefault();
    console.table(errors);
  }
});

Deaktiviertes Fieldset schließt Felder aus

const fieldset = document.createElement('fieldset');
const email = document.createElement('input');
email.type = 'email';
email.required = true;
fieldset.append(email);
document.body.append(fieldset);

console.log(email.willValidate); // true
fieldset.disabled = true;
console.log(email.willValidate); // false
console.log(email.checkValidity()); // true – wird nicht geprüft

true false true

// Wichtig · Fallstricke

Nicht mit Gültigkeit verwechseln: willValidate === true bedeutet nur, dass das Feld geprüft wird – nicht, dass es gültig ist. Den Zustand liefern validity.valid bzw. checkValidity().
Ist willValidate false, gibt checkValidity() immer true zurück und setCustomValidity() zeigt keine Wirkung beim Absenden.
Das Formularattribut novalidate beeinflusst willValidate nicht – es unterdrückt nur die automatische Prüfung beim Absenden.
Die Eigenschaft ist schreibgeschützt; eine Zuweisung wird still ignoriert (im Strict Mode kein Fehler, da Getter ohne Setter auf dem Prototyp… tatsächlich wirft der Strict Mode einen TypeError).
Kompatibilität: In allen modernen Browsern verfügbar; ebenfalls vorhanden auf HTMLSelectElement, HTMLTextAreaElement, HTMLButtonElement, HTMLOutputElement (immer false), HTMLFieldSetElement (immer false) und HTMLObjectElement.

Siehe auch

HTMLInputElement.checkValidity() HTMLInputElement.reportValidity() HTMLInputElement.setCustomValidity() HTMLInputElement.validity HTMLInputElement.validationMessage ValidityState ElementInternals.willValidate