HTMLTextAreaElement.reportValidity() — Methode · JavaScript-Referenz

Signatur

HTMLTextAreaElement.prototype.reportValidity()

Beschreibung

Die Methode reportValidity() führt für ein <textarea>-Element dieselben Gültigkeitsprüfungen aus wie checkValidity(). Sie berücksichtigt dabei Einschränkungen wie required, minlength und maxlength sowie eigene Fehlermeldungen, die per setCustomValidity() gesetzt wurden.

Ist das Feld ungültig, wird am Element ein abbrechbares invalid-Event ausgelöst. Wird dieses Event nicht per preventDefault() abgebrochen, zeigt der Browser dem Nutzer das Problem an. Meist erscheint dann eine Sprechblase mit der Fehlermeldung, und das Feld bekommt den Fokus. Genau das unterscheidet die Methode von checkValidity(): Diese prüft nur still und zeigt nichts an.

Nützlich ist reportValidity() vor allem, wenn Formulardaten per JavaScript abgeschickt werden (z. B. mit fetch()), ohne dass ein echtes submit stattfindet. Die Methode wird auch bei der Prüfung von Feldern während der Eingabe verwendet oder bei mehrstufigen Formularen, bei denen jeder Schritt einzeln geprüft wird.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Wert des Elements alle Einschränkungen erfüllt oder das Element nicht an der Prüfung teilnimmt (z. B. bei disabled oder readonly), sonst false.

Beispiele

Kommentarfeld vor dem Absenden per fetch prüfen

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

button.addEventListener('click', async () => {
  // Zeigt bei Fehlern die Browser-Meldung an und fokussiert das Feld
  if (!textarea.reportValidity()) return;

  await fetch('/api/kommentare', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text: textarea.value })
  });
  console.log('Kommentar gesendet');
});

Bei leerem Feld: Browser-Sprechblase "Bitte füllen Sie dieses Feld aus." Bei gültiger Eingabe: Kommentar gesendet

Eigene Fehlermeldung mit setCustomValidity()

const nachricht = document.querySelector('textarea[name="nachricht"]');

const pruefen = () => {
  const verboten = /https?:\/\//i.test(nachricht.value);
  nachricht.setCustomValidity(verboten ? 'Links sind in Nachrichten nicht erlaubt.' : '');
  return nachricht.reportValidity();
};

nachricht.value = 'Schau mal auf https://example.com';
console.log(pruefen());

nachricht.value = 'Hallo zusammen!';
console.log(pruefen());

false true

Browser-Meldung unterdrücken und eigene Anzeige nutzen

const feld = document.querySelector('#beschreibung');
const fehler = document.querySelector('#beschreibung-fehler');

feld.addEventListener('invalid', (event) => {
  event.preventDefault(); // keine Standard-Sprechblase
  fehler.textContent = feld.validationMessage;
});

feld.addEventListener('input', () => {
  fehler.textContent = '';
});

const ok = feld.reportValidity();
console.log('Gültig:', ok);

Gültig: false (bei leerem Pflichtfeld)

// Wichtig · Fallstricke

Nebenwirkungen: Anders als checkValidity() zeigt reportValidity() Meldungen an und verschiebt meist auch den Fokus. Wer die Methode bei jedem input-Event aufruft, stört den Nutzer beim Tippen. Für eine stille Prüfung ist checkValidity() besser geeignet.
Eigene Meldungen zurücksetzen: Nach setCustomValidity('Text') bleibt das Feld so lange ungültig, bis man setCustomValidity('') aufruft.
Nicht geprüfte Elemente: Bei disabled- oder readonly-Feldern und in <datalist> findet keine Prüfung statt, das Ergebnis ist immer true.
novalidate am Formular hat keinen Einfluss auf diese Methode. Sie prüft trotzdem.
Die Methode ersetzt keine Prüfung auf dem Server, denn Prüfungen im Browser lassen sich leicht umgehen.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome 40+, Firefox 49+, Safari 10.1+, Edge 17+), nicht jedoch vom Internet Explorer. Aussehen und Wortlaut der Meldung legt der Browser fest.

Siehe auch

HTMLTextAreaElement.checkValidity() HTMLTextAreaElement.setCustomValidity() HTMLTextAreaElement.select() HTMLTextAreaElement.setRangeText() HTMLTextAreaElement.setSelectionRange()