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
<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
input:invalid {
border: red solid 3px;
}
JavaScript
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
- ValidityState badInput, valid Eigenschaften.
- Einschränkungsvalidierung
- Formulare: Datenformularvalidierung