HTMLInputElement: setCustomValidity() Methode

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Die HTMLInputElement.setCustomValidity()-Methode setzt eine benutzerdefinierte Fehlermeldung fr das Element.

Syntax

setCustomValidity(message)

Parameter

message: Die Nachricht, die fr Gltigkeitsfehler verwendet werden soll.

In diesem Beispiel bergeben wir die ID eines Eingabeelements und setzen verschiedene Fehlermeldungen je nachdem, ob der Wert fehlt, zu niedrig oder zu hoch ist. Beachten Sie, dass die Nachricht nicht sofort angezeigt wird. Ein Versuch, das Formular abzuschicken, wird die Nachricht anzeigen, oder Sie knnen die Methode reportValidity() auf dem Element aufrufen.

function validate(inputID) {
  const input = document.getElementById(inputID);
  const validityState = input.validity;

  if (validityState.valueMissing) {
    input.setCustomValidity("You gotta fill this out, yo!");
  } else if (validityState.rangeUnderflow) {
    input.setCustomValidity("We need a higher number!");
  } else if (validityState.rangeOverflow) {
    input.setCustomValidity("That's too high!");
  } else {
    input.setCustomValidity("");
  }

  input.reportValidity();
}

Es ist wichtig, die Nachricht auf einen leeren String zu setzen, wenn keine Fehler vorliegen. Solange die Fehlermeldung nicht leer ist, wird das Formular die berprfung nicht bestehen und nicht abgeschickt.