HTMLTextAreaElement.willValidate — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.willValidate

Beschreibung

Die Eigenschaft willValidate gibt true zurück, wenn das <textarea>-Element ein Kandidat für die Einschränkungsvalidierung ist. In diesem Fall werden Regeln wie required, minlength und maxlength sowie per setCustomValidity() gesetzte Fehler geprüft, wenn das Formular abgeschickt oder checkValidity() bzw. reportValidity() aufgerufen wird.

Ein <textarea> 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> (außerhalb dessen erster <legend>).
Das Element hat das Attribut readonly.
Das Element liegt innerhalb eines <datalist>-Elements.

Nützlich ist die Eigenschaft vor allem für eigene Validierungslogik: Bevor man Fehlermeldungen anzeigt oder Felder hervorhebt, prüft man mit willValidate, ob das Feld überhaupt validiert wird. So vermeidet man z. B., dass schreibgeschützte oder deaktivierte Felder als fehlerhaft markiert werden.

Rückgabewert

Typ

boolean

Beschreibung

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

Beispiele

Einfache Abfrage bei verschiedenen Zuständen

const ta = document.createElement('textarea');
console.log(ta.willValidate); // normales Feld

ta.readOnly = true;
console.log(ta.willValidate); // readonly

ta.readOnly = false;
ta.disabled = true;
console.log(ta.willValidate); // disabled

true false false

Nur validierbare Felder mit Fehlern markieren

// <form id="feedback">
//   <textarea name="kommentar" required minlength="10"></textarea>
//   <textarea name="intern" readonly>Automatisch erzeugt</textarea>
// </form>
const form = document.querySelector('#feedback');

form.addEventListener('submit', (event) => {
  const fields = [...form.querySelectorAll('textarea')];
  const invalid = fields.filter((ta) => ta.willValidate && !ta.checkValidity());

  fields.forEach((ta) => ta.classList.toggle('fehler', invalid.includes(ta)));

  if (invalid.length > 0) {
    event.preventDefault();
    invalid[0].focus();
    console.log(`${invalid.length} Feld(er) ungültig`);
  }
});

1 Feld(er) ungültig

Auswirkung eines deaktivierten Fieldsets

document.body.innerHTML = `
  <fieldset id="fs">
    <textarea id="notiz" required></textarea>
  </fieldset>`;

const notiz = document.querySelector('#notiz');
console.log(notiz.willValidate, notiz.checkValidity());

document.querySelector('#fs').disabled = true;
console.log(notiz.willValidate, notiz.checkValidity());

true false false true

// Wichtig · Fallstricke

Nicht mit Gültigkeit verwechseln: willValidate sagt nur, ob das Feld validiert wird, nicht ob es gültig ist. Dafür gibt es validity.valid oder checkValidity().
Ist willValidate gleich false, liefert checkValidity() immer true und validity.valid ist ebenfalls true, auch wenn das Feld leer und required ist.
Das Attribut novalidate am Formular ändert willValidate nicht, es verhindert nur die automatische Prüfung beim Absenden.
Ein <textarea> außerhalb eines <form> gibt trotzdem true zurück.
Die Eigenschaft ist schreibgeschützt; Zuweisungen werden ohne Fehler ignoriert (im Strict Mode wird ein TypeError ausgelöst).
Wird von allen modernen Browsern unterstützt (Teil der Constraint Validation API).

Siehe auch

HTMLTextAreaElement.validity HTMLTextAreaElement.value HTMLTextAreaElement.dirName HTMLTextAreaElement.disabled HTMLTextAreaElement.minLength