HTMLTextAreaElement.validity — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.validity

Beschreibung

Die Eigenschaft validity liefert ein ValidityState-Objekt. Über dessen boolesche Eigenschaften lässt sich prüfen, ob ein <textarea> die Einschränkungen der HTML-Formularvalidierung erfüllt. Die Eigenschaft selbst ist schreibgeschützt. Das Objekt ist aber „live“: Es zeigt immer den aktuellen Zustand, auch nachdem der Wert geändert wurde.

Für ein <textarea> sind vor allem diese Zustände wichtig:

valueMissing: Das Attribut required ist gesetzt, aber das Feld ist leer.
tooLong / tooShort: Der Text verletzt maxlength bzw. minlength.
customError: Mit setCustomValidity() wurde eine eigene Fehlermeldung gesetzt.
valid: Keine der Einschränkungen ist verletzt.

Mit validity bauen Sie eigene Fehlermeldungen oder Live-Validierung, ohne auf die Standard-Sprechblasen des Browsers angewiesen zu sein. Gut kombinieren lässt sich das mit novalidate am Formular, dem Ereignis invalid und den Methoden checkValidity() bzw. reportValidity().

Rückgabewert

Typ

ValidityState

Beschreibung

Ein live aktualisiertes ValidityState-Objekt mit den booleschen Eigenschaften valueMissing, tooLong, tooShort, customError, valid sowie weiteren (typeMismatch, patternMismatch, rangeOverflow, rangeUnderflow, stepMismatch, badInput). Diese weiteren Eigenschaften sind bei einem <textarea> immer false.

Beispiele

Pflichtfeld prüfen

// HTML: <textarea id="kommentar" required></textarea>
const textarea = document.querySelector('#kommentar');

console.log(textarea.validity.valueMissing); // leer + required
console.log(textarea.validity.valid);

textarea.value = 'Toller Artikel!';
console.log(textarea.validity.valueMissing);
console.log(textarea.validity.valid);

true false false true

Eigene Fehlermeldungen bei der Eingabe anzeigen

// HTML:
// <textarea id="bio" required minlength="20" maxlength="300"></textarea>
// <p id="bio-fehler" aria-live="polite"></p>
const bio = document.querySelector('#bio');
const fehler = document.querySelector('#bio-fehler');

const meldungFuer = (v) => {
  if (v.valueMissing) return 'Bitte geben Sie eine Kurzbeschreibung ein.';
  if (v.tooShort) return `Mindestens ${bio.minLength} Zeichen (aktuell ${bio.value.length}).`;
  if (v.tooLong) return `Höchstens ${bio.maxLength} Zeichen erlaubt.`;
  if (v.customError) return bio.validationMessage;
  return '';
};

bio.addEventListener('input', () => {
  fehler.textContent = meldungFuer(bio.validity);
  bio.setAttribute('aria-invalid', String(!bio.validity.valid));
});

customError mit setCustomValidity() setzen

// HTML: <form id="f"><textarea id="nachricht"></textarea><button>Senden</button></form>
const nachricht = document.querySelector('#nachricht');
const verboten = ['spam', 'casino'];

nachricht.addEventListener('input', () => {
  const treffer = verboten.find((w) => nachricht.value.toLowerCase().includes(w));
  nachricht.setCustomValidity(treffer ? `Das Wort „${treffer}“ ist nicht erlaubt.` : '');
});

nachricht.value = 'Gratis Casino-Bonus';
nachricht.dispatchEvent(new Event('input'));
console.log(nachricht.validity.customError, nachricht.validity.valid);
console.log(nachricht.validationMessage);

true false Das Wort „casino“ ist nicht erlaubt.

// Wichtig · Fallstricke

tooLong/tooShort nur bei Benutzereingaben: Weisen Sie value per Skript zu, setzen Browser diese Flags in der Regel nicht. Laut Spezifikation greifen sie erst, wenn der Wert durch den Benutzer geändert wurde (Dirty-Flag). Bei per Code gesetzten Werten prüfen Sie die Länge daher selbst.
Kein pattern: <textarea> unterstützt das Attribut pattern nicht, patternMismatch ist also immer false. Eigene Regeln setzen Sie über setCustomValidity().
customError zurücksetzen: Solange die eigene Meldung kein leerer String ist, bleibt das Feld ungültig. Rufen Sie deshalb immer auch setCustomValidity('') auf.
Deaktivierte Felder: Hat das Element disabled oder readonly, wird es nicht validiert (willValidate === false). validity.valid kann dann trotzdem false anzeigen, das Formular wird aber abgeschickt.
Die clientseitige Validierung ersetzt keine Prüfung auf dem Server, denn sie lässt sich leicht umgehen.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

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