HTMLInputElement.validationMessage — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.validationMessage

Beschreibung

Die Eigenschaft validationMessage gibt die Meldung zurück, die der Browser anzeigen würde, wenn das Formular mit diesem Feld abgeschickt wird. Ist das Feld gültig (validity.valid === true) oder nimmt es gar nicht an der Validierung teil (z. B. disabled, readonly oder type="hidden"), ist der Wert ein leerer String.

Die Meldung ist lokalisiert: Sprache und Wortlaut hängen von Browser und Systemsprache ab, z. B. „Füllen Sie dieses Feld aus.“ bei einem leeren required-Feld. Wurde mit setCustomValidity() eine eigene Meldung gesetzt, liefert validationMessage genau diesen Text zurück.

Typischer Einsatzzweck sind eigene Fehleranzeigen: Man unterdrückt die nativen Hinweisblasen (per novalidate oder mit preventDefault() im invalid-Ereignis) und schreibt stattdessen validationMessage in ein eigenes Element neben dem Feld. So bekommt man einheitliches Aussehen, ohne die Texte selbst übersetzen zu müssen.

Rückgabewert

Typ

string

Beschreibung

Lokalisierte Fehlermeldung zur aktuell verletzten Regel oder die mit setCustomValidity() gesetzte Meldung; leerer String, wenn das Feld gültig ist oder nicht validiert wird.

Beispiele

Meldung eines leeren Pflichtfelds auslesen

// <input id="email" type="email" required>
const input = document.querySelector('#email');

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

input.value = 'max@example.com';
console.log(JSON.stringify(input.validationMessage));

true Füllen Sie dieses Feld aus. ""

Eigene Fehleranzeige statt nativer Hinweisblase

// <form novalidate>
//   <input name="age" type="number" min="18" max="120" required>
//   <span class="error" aria-live="polite"></span>
//   <button>Senden</button>
// </form>
const form = document.querySelector('form');
const age = form.elements.age;
const error = age.nextElementSibling;

const showError = () => {
  error.textContent = age.validationMessage;
  age.setAttribute('aria-invalid', String(!age.validity.valid));
};

age.addEventListener('input', showError);

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

Bei Eingabe "12" z. B.: Der Wert muss größer oder gleich 18 sein.

Eigene Meldung mit setCustomValidity()

// <input id="pw" type="password"> und <input id="pw2" type="password">
const pw = document.querySelector('#pw');
const pw2 = document.querySelector('#pw2');

const checkMatch = () => {
  pw2.setCustomValidity(
    pw.value === pw2.value ? '' : 'Die Passwörter stimmen nicht überein.'
  );
  console.log(pw2.validationMessage || '(gültig)');
};

pw.value = 'geheim123';
pw2.value = 'geheim12';
checkMatch();
pw2.value = 'geheim123';
checkMatch();

Die Passwörter stimmen nicht überein. (gültig)

// Wichtig · Fallstricke

Nicht auf den Wortlaut verlassen: Der Text unterscheidet sich zwischen Chrome, Firefox und Safari sowie je nach Sprache. Für Programmlogik immer validity (z. B. validity.typeMismatch) prüfen, nicht den String vergleichen.
Schreibgeschützt: Eine Zuweisung wie input.validationMessage = '…' wird still ignoriert (im Strict Mode TypeError). Eigene Meldungen setzt man mit setCustomValidity().
Eigene Meldung zurücksetzen: Eine mit setCustomValidity('Text') gesetzte Meldung bleibt bestehen und hält das Feld ungültig, bis setCustomValidity('') aufgerufen wird – ein häufiger Grund für „Formular lässt sich nicht mehr absenden“.
Deaktivierte, schreibgeschützte oder versteckte Felder liefern immer "", weil sie von der Validierung ausgenommen sind.
Bei Ausgabe ins DOM textContent statt innerHTML verwenden, besonders wenn eigene Meldungen Benutzereingaben enthalten (XSS).
Barrierefreiheit: Eigene Fehlerelemente mit aria-live bzw. aria-describedby verknüpfen, damit Screenreader die Meldung vorlesen.
Kompatibilität: In allen modernen Browsern verfügbar; dieselbe Eigenschaft gibt es auch an HTMLSelectElement, HTMLTextAreaElement, HTMLButtonElement u. a.

Siehe auch

HTMLInputElement.selectionStart HTMLInputElement.valueAsDate HTMLInputElement.selectionEnd HTMLInputElement.validity HTMLInputElement.colorSpace