ValidityState: customError-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.

Die schreibgeschützte customError-Eigenschaft des ValidityState-Interfaces gibt true zurück, wenn ein Element die durch die Methode setCustomValidity() des Elements festgelegte benutzerdefinierte Gültigkeit nicht erfüllt.

Wert

Ein Boolean, der true ist, wenn eine benutzerdefinierte Fehlermeldung auf einen nicht-leeren String gesetzt wurde.

Beispiele

Erkennen eines benutzerdefinierten Fehlers

In diesem Beispiel setzt setCustomValidity() eine benutzerdefinierte Fehlermeldung, wenn eine Formularübermittlung Benutzereingaben enthält, die als ungültig angesehen werden. Der "Eingabe validieren"-Button ruft reportValidity() auf, welches eine Validierungsnachricht unter dem Element anzeigt, wenn ein Benutzer Werte eingibt, die nicht den Einschränkungen des Formulars entsprechen.

Wenn Sie den Text "good" oder "fine" eingeben und versuchen, die Eingabe zu validieren, wird das Feld als ungültig markiert, bis die benutzerdefinierte Fehlermeldung gelöscht wird (auf einen leeren String gesetzt wird). Zum Vergleich gibt es ein minlength-Attribut auf dem Eingabeelement, mit dem wir den tooShort-Gültigkeitszustand demonstrieren können, wenn der Benutzer weniger als zwei Zeichen eingibt. Wenn der Wert im Formularsteuerelement ungültig ist, selbst wenn kein benutzerdefinierter Fehler vorliegt, wird das Eingabefeld einen roten Rand haben.

HTML

html
<pre id="log">Validation failures logged here...</pre>
<input
  type="text"
  id="userInput"
  placeholder="How do you feel?"
  minlength="2" />
<button id="checkButton">Validate input</button>

CSS

css
input:invalid {
  border: red solid 3px;
}

JavaScript

js
const userInput = document.getElementById("userInput");
const checkButton = document.getElementById("checkButton");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

const check = (input) => {
  // Handle cases where input is too vague
  if (input.value == "good" || input.value == "fine") {
    input.setCustomValidity(`"${input.value}" is not a feeling.`);
  } else {
    // An empty string resets the custom validity state
    input.setCustomValidity("");
  }
};

userInput.addEventListener("input", () => {
  check(userInput);
});

const validateInput = () => {
  userInput.reportValidity();
  if (userInput.validity.customError) {
    // We can handle custom validity states here
    log("Custom validity error: " + userInput.validationMessage);
  } else {
    log(userInput.validationMessage);
  }
};

checkButton.addEventListener("click", validateInput);

Ergebnis

Spezifikationen

Specification
HTML Standard
# dom-validitystate-customerror-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch