HTMLTextAreaElement.checkValidity() — Methode · JavaScript-Referenz

Signatur

HTMLTextAreaElement.prototype.checkValidity()

Beschreibung

Die Methode checkValidity() prüft ein <textarea>-Element anhand seiner Validierungsregeln. Dazu gehören die Attribute required, minlength und maxlength sowie eine eigene Fehlermeldung, die mit setCustomValidity() gesetzt wurde. Gibt es keine Verstöße, liefert sie true, sonst false.

Ist das Element ungültig, löst die Methode zusätzlich ein abbrechbares invalid-Event auf dem Element aus. Anders als reportValidity() zeigt checkValidity() dem Nutzer keine Fehlermeldung im Browser an. Deshalb eignet sie sich gut für eigene Validierungsoberflächen, zum Beispiel um einen Senden-Button zu aktivieren oder eigene Fehlertexte einzublenden.

Welche Regel genau verletzt ist, steht in der Eigenschaft validity (ein ValidityState-Objekt). Der passende Fehlertext des Browsers steht in validationMessage. Elemente, die von der Validierung ausgenommen sind (z. B. disabled oder readonly), gelten immer als gültig.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element gültig ist oder nicht validiert wird; false, wenn mindestens eine Regel verletzt ist. In diesem Fall wird außerdem ein invalid-Event ausgelöst.

Beispiele

Pflichtfeld und Mindestlänge prüfen

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

textarea.value = '';
console.log(textarea.checkValidity());          // leer, aber required
console.log(textarea.validity.valueMissing);

textarea.value = 'Hallo Welt, toller Artikel!';
console.log(textarea.checkValidity());

false true true

Senden-Button live aktivieren/deaktivieren

// HTML: <textarea id="nachricht" required maxlength="500"></textarea>
//       <button id="senden" disabled>Senden</button>
const nachricht = document.querySelector('#nachricht');
const senden = document.querySelector('#senden');

nachricht.addEventListener('input', () => {
  senden.disabled = !nachricht.checkValidity();
});

Eigene Regel mit setCustomValidity und invalid-Event

// HTML: <textarea id="bio"></textarea><p id="fehler"></p>
const bio = document.querySelector('#bio');
const fehler = document.querySelector('#fehler');

bio.addEventListener('invalid', (event) => {
  event.preventDefault(); // Standard-Verhalten unterdrücken
  fehler.textContent = bio.validationMessage;
});

const pruefen = () => {
  const verboten = /https?:\/\//i.test(bio.value);
  bio.setCustomValidity(verboten ? 'Bitte keine Links in der Biografie.' : '');
  if (bio.checkValidity()) fehler.textContent = '';
};

bio.value = 'Mehr unter https://example.com';
pruefen();
console.log(fehler.textContent);

Bitte keine Links in der Biografie.

// Wichtig · Fallstricke

Keine sichtbare Rückmeldung: checkValidity() zeigt keine Fehlerblase im Browser an. Wenn der Nutzer den Fehler sehen soll, nimm reportValidity().
Seiteneffekt: Bei Ungültigkeit wird jedes Mal ein invalid-Event ausgelöst. Rufst du die Methode häufig auf (z. B. bei jedem input), feuern auch deine invalid-Handler entsprechend oft.
minlength/maxlength: Diese Regeln greifen bei der Längenprüfung (tooShort/tooLong) nur für Werte, die der Nutzer selbst bearbeitet hat. Ein Wert, der nur per Skript gesetzt wurde, kann trotzdem als gültig gelten. Ob das bei Längenverstößen so ist, hängt vom Browser ab.
setCustomValidity() zurücksetzen: Solange ein nicht-leerer Fehlertext gesetzt ist, bleibt das Feld ungültig. Setze ihn mit setCustomValidity('') zurück.
disabled/readonly: Solche Felder werden nicht validiert und liefern immer true.
Sicherheit: Die Prüfung im Browser dient nur der Bedienbarkeit. Sie lässt sich leicht umgehen und ersetzt keine Prüfung auf dem Server.
Kompatibilität: Wird von allen modernen Browsern unterstützt (auch von IE 10+).

Siehe auch

HTMLTextAreaElement.reportValidity() HTMLTextAreaElement.setCustomValidity() HTMLTextAreaElement.validity HTMLTextAreaElement.validationMessage HTMLFormElement.checkValidity() ValidityState