HTMLButtonElement: reportValidity()-Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2018 browserübergreifend verfügbar.
Die Methode reportValidity() der Schnittstelle HTMLButtonElement führt dieselben Schritte zur Gültigkeitsprüfung aus wie die Methode checkValidity(). Wenn das Ereignis invalid nicht abgebrochen wird, zeigt der Browser das Problem außerdem der Person an, die die Seite verwendet. Die Methode gibt immer true zurück, wenn das Element <button> kein Kandidat für die Constraint-Validierung ist (sein willValidate ist false).
Syntax
reportValidity()
Parameter
Keine.
Rückgabewert
Gibt true zurück, wenn der Wert des Elements keine Gültigkeitsprobleme aufweist oder das Element kein Kandidat für die Constraint-Validierung ist; andernfalls gibt die Methode false zurück.
Beispiele
Dieses etwas konstruierte Beispiel zeigt, wie ein Button ungültig gemacht werden kann.
HTML
Wir erstellen zwei Buttons:
<p>
<button id="example" type="submit" value="fixed">THIS BUTTON</button>
</p>
<p>
<button type="button" id="report">reportValidity()</button>
</p>
<p id="log"></p>
CSS
Wir fügen etwas CSS hinzu, darunter :valid- und :invalid-Stile für unseren Button:
button {
background-color: #3333aa;
border: none;
font-size: 1.3rem;
padding: 5px 10px;
color: white;
}
button:invalid {
background-color: #aa3333;
}
button:valid {
background-color: #33aa33;
}
JavaScript
Wir fügen eine Funktion hinzu, die den Wert, den Inhalt und die Validierungsmeldung des Beispiel-Buttons umschaltet:
const reportButton = document.querySelector("#report");
const exampleButton = document.querySelector("#example");
const output = document.querySelector("#log");
reportButton.addEventListener("click", () => {
const reportVal = exampleButton.reportValidity();
output.innerHTML = `reportValidity returned: ${reportVal} <br/> custom error: ${exampleButton.validationMessage}`;
});
exampleButton.addEventListener("invalid", () => {
console.log("Invalid event fired on exampleButton");
});
exampleButton.addEventListener("click", () => {
if (exampleButton.value === "error") {
breakOrFixButton("fixed");
} else {
breakOrFixButton("error");
}
output.innerHTML = `validation message: ${exampleButton.validationMessage} <br/> custom error: ${exampleButton.validationMessage}`;
});
function breakOrFixButton() {
const state = toggleButton();
if (state === "error") {
exampleButton.setCustomValidity("This is a custom error message");
} else {
exampleButton.setCustomValidity("");
}
}
function toggleButton() {
if (exampleButton.value === "error") {
exampleButton.value = "fixed";
exampleButton.innerHTML = "No error";
} else {
exampleButton.value = "error";
exampleButton.innerHTML = "Custom error";
}
return exampleButton.value;
}
Ergebnis
Der Button ist standardmäßig gültig. Aktivieren Sie „THIS BUTTON“, um den Wert und den Inhalt zu ändern und eine benutzerdefinierte Fehlermeldung hinzuzufügen. Wenn Sie den Button „reportValidity()“ aktivieren, wird die Gültigkeit des Buttons geprüft. Besteht der Button aufgrund der Fehlermeldung die Constraint-Validierung nicht, wird die benutzerdefinierte Fehlermeldung angezeigt und ein invalid-Ereignis ausgelöst.
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-cva-reportvalidity-dev |