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 des HTMLInputElement-Interfaces gibt einen booleschen Wert zurück, der anzeigt, ob das Element alle angewendeten Einschränkungs-Validierungsregeln erfüllt. Wenn der Wert false ist, löst die Methode zudem ein invalid-Ereignis am Element aus. Da es kein Standardverhalten im Browser für checkValidity() gibt, hat das Abbrechen dieses invalid-Ereignisses keine Wirkung.

Hinweis: Ein HTML-<input>-Element mit einer nicht-NULL validationMessage wird als ungültig betrachtet, passt zur CSS-:invalid-Pseudoklasse und führt dazu, dass checkValidity() false zurückgibt. Verwenden Sie die HTMLInputElement.setCustomValidity()-Methode, um die HTMLInputElement.validationMessage auf den leeren String zu setzen und den validity-Zustand auf gültig zu setzen.

Syntax

js
checkValidity()

Parameter

Keine.

Rückgabewert

Gibt true zurück, wenn der Wert des Elements keine Validitätsprobleme aufweist; ansonsten gibt es false zurück.

Beispiele

HTML

Wir fügen ein Formular mit einem erforderlichen Zahlenfeld und zwei Schaltflächen hinzu: eine, um das Formular zu prüfen, und eine, um es abzusenden.

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, falls der Wert fehlt, unter 21, über 65 oder anderweitig ungültig ist, das ungültige Ereignis in der Konsole protokolliert. Um den Fehler dem Benutzer mitzuteilen, 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