Die checkValidity() Methode des HTMLInputElement Interfaces gibt einen booleschen Wert zurück, der anzeigt, ob das Element die darauf angewendeten Constraint-Validierungsregeln erfüllt. Wenn der Wert false ist, löst die Methode auch ein invalid Ereignis auf dem Element aus. Da es kein Standardverhalten des Browsers für checkValidity() gibt, hat das Abbrechen dieses invalid Ereignisses keine Wirkung.

Syntax

Parameter

Keine.

Rückgabewert

Gibt true zurück, wenn der Wert des Elements keine Validitätsprobleme aufweist; andernfalls wird false zurückgegeben.

Beispiele

HTML

Wir fügen ein Formular mit einem erforderlichen Zahlenfeld und zwei Schaltflächen hinzu: eine zur Überprüfung des Formulars und die andere, um es zu senden.

<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 der Wert false ist, weil er fehlt, unter 21, über 65 oder anderweitig ungültig ist, wird das ungültige Ereignis der Konsole protokolliert. Um den Fehler dem Benutzer zu melden, verwenden Sie stattdessen HTMLInputElement.reportValidity().

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTMLInputElement.reportValidity()
• <input>
• <form>
• Erfahren Sie mehr: Client-seitige Formularvalidierung
• Leitfaden: Constraint-Validierung
• CSS :valid und :invalid Pseudoklassen