Baseline Widely available
Die schreibgeschützte customError-Eigenschaft der ValidityState-Schnittstelle gibt true zurück, wenn ein Element nicht die Validierungsvoraussetzungen erfüllt, die durch die Methode setCustomValidity() festgelegt wurden.
Ein Boolean, der true ist, wenn eine benutzerdefinierte Fehlermeldung auf einen nicht-leeren String gesetzt wurde.
In diesem Beispiel setzt setCustomValidity() eine benutzerdefinierte Fehlermeldung, wenn eine Formularübermittlung Benutzereingaben enthält, die als ungültig gelten. Die Schaltfläche "Eingabe validieren" ruft reportValidity() auf, das 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 (auf einen leeren String gesetzt) wird. Zum Vergleich gibt es ein minlength-Attribut auf dem Eingabe-Element, das es uns ermöglicht, den tooShort-Validitätszustand zu demonstrieren, wenn der Benutzer weniger als zwei Zeichen eingibt. Wenn der Wert im Formularsteuerelement ungültig ist, hat die Eingabe ein rotes Umriss, auch wenn kein benutzerdefinierter Fehler vorliegt.
<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>
input:invalid {
border: red solid 3px;
}
body {
margin: 0.5rem;
}
pre {
padding: 1rem;
height: 2rem;
background-color: lightgrey;
outline: 1px solid grey;
}
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);
Diese Seite wurde automatisch aus dem Englischen übersetzt.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4