HTMLButtonElement: reportValidity() method
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.
ThereportValidity() method of theHTMLButtonElement interface performs the same validity checking steps as thecheckValidity() method. In addition, if theinvalid event is not canceled, the browser displays the problem to the user.
Syntax
reportValidity()Parameters
None.
Return value
Returnstrue if the element's value has no validity problems; otherwise, returnsfalse.
Examples
This far fetched example demonstrates how a button can be made invalid.
HTML
We create a form that only contains a few buttons:
<form action="#" method="post"> <p> <input type="submit" value="Submit" /> <button type="submit" value="fixed">THIS BUTTON</button> </p> <p> <button type="button">reportValidity()</button> </p></form><p></p>CSS
We add a bit of CSS, including:valid and:invalid styles for our button:
input[type="submit"],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
We include a function to toggle the value, content, and validation message of the example button:
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", (e) => { e.preventDefault(); 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;}Results
The button is by default valid. Activate "THIS BUTTON" to change the value, content, and add a custom error message. Activating the "reportValidity()" button checks the validity of the button, reporting the custom error message to the user and throwing aninvalid event if the button does not pass constraint validation due to the message.
Specifications
| Specification |
|---|
| HTML # dom-cva-reportvalidity-dev |