HTMLInputElement: Methode checkValidity()
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die Methode checkValidity() der Schnittstelle HTMLInputElement gibt einen booleschen Wert zurück, der angibt, ob das Element die für es geltenden Regeln der Constraint Validation erfüllt. Wenn sie false zurückgibt, löst die Methode außerdem ein invalid-Ereignis auf dem Element aus. Da es für checkValidity() kein standardmäßiges Browserverhalten gibt, hat das Verhindern dieses invalid-Ereignisses keine Auswirkung.
Hinweis:
Ein HTML-Element <input> mit einer nicht leeren validationMessage gilt als ungültig, entspricht der CSS-Pseudoklasse :invalid und führt dazu, dass checkValidity() false zurückgibt. Verwenden Sie die Methode HTMLInputElement.setCustomValidity(), um HTMLInputElement.validationMessage auf die leere Zeichenfolge zu setzen und damit den Zustand von validity auf gültig zu setzen.
Syntax
checkValidity()
Parameter
Keine.
Rückgabewert
Gibt true zurück, wenn der Wert des Elements keine Validitätsprobleme aufweist; andernfalls false.
Beispiele
HTML
Wir fügen ein erforderliches Zahlenfeld und eine Schaltfläche hinzu, mit der sich dessen Gültigkeit überprüfen lässt.
<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="button" id="check">checkValidity()</button>
</p>
<pre id="log"></pre>
JavaScript
Wenn die Schaltfläche aktiviert wird, protokollieren wir den Rückgabewert von checkValidity(). Außerdem lauschen wir auf das invalid-Ereignis und fügen der Ausgabe eine Meldung hinzu, wenn es ausgelöst wird.
const output = document.querySelector("#log");
const checkButton = document.querySelector("#check");
const ageInput = document.querySelector("#age");
ageInput.addEventListener("invalid", () => {
output.textContent += "Invalid event fired.\n";
});
checkButton.addEventListener("click", () => {
const checkVal = ageInput.checkValidity();
output.textContent = `checkValidity returned: ${checkVal}`;
});
Ergebnis
Wenn der Rückgabewert false ist, weil der Wert fehlt, unter 21 oder über 65 liegt oder aus einem anderen Grund ungültig ist, wird das invalid-Ereignis in der Ausgabe protokolliert. Um den Fehler den Nutzenden zu melden, verwenden Sie stattdessen HTMLInputElement.reportValidity().
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-cva-checkvalidity-dev |