HTMLInputElement: checkValidity() Methode
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 checkValidity()
-Methode der HTMLInputElement
-Schnittstelle gibt einen Boolean-Wert zurück, der anzeigt, ob das Element allen darauf angewendeten Einschränkungsvalidierungsregeln entspricht. Ist der Wert false
, löst die Methode auch ein invalid
-Ereignis auf dem Element aus. Da es kein Standardbrowserverhalten für checkValidity()
gibt, hat das Abbrechen dieses invalid
-Ereignisses keine Auswirkungen.
Hinweis:
Ein HTML-<input>
-Element mit einer nicht-null validationMessage
wird als ungültig angesehen, entspricht der CSS :invalid
-Pseudoklasse und führt dazu, dass checkValidity()
false
zurückgibt. Verwenden Sie die Methode HTMLInputElement.setCustomValidity()
, um die HTMLInputElement.validationMessage
auf den leeren String zu setzen, um den validity
-Zustand als gültig festzulegen.
Syntax
checkValidity()
Parameter
Keine.
Rückgabewert
Gibt true
zurück, wenn der Wert des Elements keine Gültigkeitsprobleme aufweist; andernfalls wird false
zurückgegeben.
Beispiele
HTML
Wir enthalten ein Formular mit einem erforderlichen Zahlenfeld und zwei Schaltflächen: eine zur Überprüfung des Formulars und eine andere zum Absenden.
<form action="#" method="post">
<p>
<label for="age">Your (21 to 65) </label>
<input type="number" name="age" required id="age" min="21" max="65" />
</p>
<p>
<button type="submit">Submit</button>
<button type="button" id="check">checkValidity()</button>
</p>
<p id="log"></p>
</form>
JavaScript
const output = document.querySelector("#log");
const checkButton = document.querySelector("#check");
const ageInput = document.querySelector("#age");
ageInput.addEventListener("invalid", () => {
console.log("Invalid event fired.");
});
checkButton.addEventListener("click", () => {
const checkVal = ageInput.checkValidity();
output.innerHTML = `checkValidity returned: ${checkVal}`;
});
Ergebnisse
Wenn false
, wird das invalid-Ereignis in die Konsole protokolliert, wenn der Wert fehlt, unter 21, über 65 liegt oder anderweitig ungültig ist. Um den Fehler dem Benutzer zu melden, verwenden Sie stattdessen HTMLInputElement.reportValidity()
.
Spezifikationen
Specification |
---|
HTML Standard # dom-cva-checkvalidity-dev |
Browser-Kompatibilität
BCD tables only load in the browser