HTMLTextAreaElement.validationMessage — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.validationMessage

Beschreibung

Die schreibgeschützte Eigenschaft validationMessage gibt den Text zurück, den der Browser in seiner eingebauten Fehlerblase anzeigen würde, wenn das <textarea>-Element die Constraint-Validierung nicht besteht, z. B. weil ein required-Feld leer ist, weil minlength/maxlength nicht eingehalten wird oder weil per setCustomValidity() ein eigener Fehler gesetzt wurde.

Ist das Element gültig oder nimmt es gar nicht an der Validierung teil (etwa weil es disabled oder readonly ist bzw. sich in einem <datalist> befindet, sodass willValidate den Wert false hat), ist der Wert ein leerer String "".

Nützlich ist die Eigenschaft vor allem dann, wenn man die Standard-Fehlerblasen des Browsers unterdrückt und die Meldungen stattdessen in einer eigenen Oberfläche anzeigt, etwa in einem Element unterhalb des Eingabefelds. Die Meldung ist in der Sprache des Browsers bzw. Betriebssystems formuliert, nicht in der Sprache der Seite.

Rückgabewert

Typ

string

Beschreibung

Lokalisierte Fehlermeldung zur ersten verletzten Beschränkung oder die per setCustomValidity() gesetzte Meldung; leerer String, wenn das Element gültig ist oder nicht validiert wird.

Beispiele

Meldung eines leeren Pflichtfelds auslesen

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

console.log(textarea.validity.valueMissing);
console.log(textarea.validationMessage);

textarea.value = 'Toller Artikel!';
console.log(JSON.stringify(textarea.validationMessage));

true Füllen Sie dieses Feld aus. ""

Eigene Fehleranzeige statt Browser-Blase

// <form id="feedback" novalidate>
//   <textarea name="text" required minlength="20"></textarea>
//   <p class="fehler" aria-live="polite"></p>
//   <button>Senden</button>
// </form>
const form = document.querySelector('#feedback');
const textarea = form.elements.text;
const fehler = form.querySelector('.fehler');

const zeigeFehler = () => {
  fehler.textContent = textarea.validationMessage;
  textarea.setAttribute('aria-invalid', String(!textarea.validity.valid));
};

textarea.addEventListener('input', zeigeFehler);

form.addEventListener('submit', (event) => {
  if (!form.checkValidity()) {
    event.preventDefault();
    zeigeFehler();
    textarea.focus();
  }
});

Eigene Meldung mit setCustomValidity()

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

bio.addEventListener('input', () => {
  const verboten = /https?:\/\//i.test(bio.value);
  bio.setCustomValidity(verboten ? 'Links sind in der Biografie nicht erlaubt.' : '');
});

bio.value = 'Mehr unter https://example.com';
bio.dispatchEvent(new Event('input'));
console.log(bio.validationMessage);
console.log(bio.validity.customError);

Links sind in der Biografie nicht erlaubt. true

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an validationMessage bleibt wirkungslos (im Strict Mode wirft sie einen TypeError). Eigene Meldungen setzt man mit setCustomValidity(), zurückgesetzt wird mit setCustomValidity(''). Ohne dieses Zurücksetzen bleibt das Feld dauerhaft ungültig.
Lokalisierung: Wortlaut und Sprache hängen von Browser und Systemsprache ab und unterscheiden sich zwischen Chrome, Firefox und Safari. Den Text deshalb nicht in Tests oder Programmlogik vergleichen, sondern stattdessen die einzelnen Eigenschaften von validity (valueMissing, tooShort …) prüfen.
minlength/maxlength: tooShort bzw. tooLong greifen erst, wenn der Wert durch eine Nutzereingabe geändert wurde. Bei einem nur per Skript gesetzten value bleibt die Meldung oft leer.
Bei disabled- oder readonly-Feldern ist der Wert immer "", weil willValidate dann false ist.
Die Meldung wird aktualisiert, ohne dass ein Ereignis ausgelöst wird. Für eine Live-Anzeige muss man sie selbst bei input oder invalid neu auslesen.
Kompatibilität: Die Eigenschaft wird seit vielen Jahren von allen modernen Browsern unterstützt.

Siehe auch

HTMLTextAreaElement.selectionStart HTMLTextAreaElement.selectionEnd HTMLTextAreaElement.validity HTMLTextAreaElement.dirName HTMLTextAreaElement.willValidate