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ültigkeit festgelegten Anforderungen nicht erfüllt, die durch die Methode setCustomValidity() des Elements festgelegt wurden.

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 eine Formularübermittlung Benutzereingaben enthält, 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 Formularbeschränkungen 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). Zum Vergleich gibt es ein minlength-Attribut im Eingabeelement, das uns ermöglicht, den tooShort Gültigkeitsstatus zu demonstrieren, wenn der Benutzer weniger als zwei Zeichen eingibt. Wenn der Wert im Formularelement ungültig ist, wird die Eingabe, auch wenn es keinen benutzerdefinierten Fehler gibt, mit einem roten Umriss angezeigt.

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