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

js
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.

html
<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

js
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

Siehe auch