HTMLInputElement: checkValidity() Methode

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

Hinweis: Ein HTML <input> Element mit einer nicht-null validationMessage wird als ungültig angesehen, 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 die leere Zeichenkette zu setzen, um den validity Zustand als gültig festzulegen.

In diesem Artikel

Syntax

checkValidity()

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.

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}`;
});

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

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLInputElement
Instanzeigenschaften
Instanzmethoden
Events
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung

HTMLInputElement: checkValidity() Methode

In diesem Artikel

Syntax

Parameter

Rückgabewert

Beispiele

HTML

JavaScript

Ergebnisse

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN