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 in der benutzerdefinierten Gültigkeitsprüfung durch die Methode setCustomValidity() des Elements festgelegte Validierung nicht erfüllt.

Wert

Ein boolescher Wert, 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 ein Formular mit Benutzereingaben gesendet wird, die als ungültig angesehen werden. Der Button "Eingabe validieren" ruft reportValidity() auf, welches eine Validierungsmeldung 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 im Eingabeelement, das uns ermöglicht, den tooShort-Gültigkeitszustand zu demonstrieren, wenn der Benutzer weniger als zwei Zeichen eingibt. Wenn der Wert im Formularelement ungültig ist, auch wenn kein benutzerdefinierter Fehler vorliegt, wird die Eingabe mit einem roten Rahmen dargestellt.

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