HTMLInputElement: 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 theHTMLInputElement 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
Basic usage
HTML
We include a form containing a required number field and two buttons: one to check the form and the other to submit it.
<form action="#" method="post"> <p> <label for="age">Your (21 to 65) </label> <input type="number" name="age" required min="21" max="65" /> </p> <p> <button type="submit">Submit</button> <button type="button">reportValidity()</button> </p> <p></p></form>JavaScript
When the "reportValidity()" button is activated, we use thereportValidity() method to check if the input's value meets its constraints. We log the return value. Iffalse, we also display the validation message and capture theinvalid event.
const output = document.querySelector("#log");const reportButton = document.querySelector("#report");const ageInput = document.querySelector("#age");ageInput.addEventListener("invalid", () => { console.log("Invalid event fired.");});reportButton.addEventListener("click", () => { const reportVal = ageInput.reportValidity(); output.innerHTML = `"reportValidity()" returned: ${reportVal}`; if (!reportVal) { output.innerHTML += `<br />Validation message: "${ageInput.validationMessage}"`; }});Results
Whenfalse, if the value is missing, is below 21, is above 65, or is otherwise invalid, an error message appears, an invalid event is fired, and we log that invalid event to the console.
Custom error message
This example demonstrates how a custom error message can cause afalse return value when the value is otherwise valid.
HTML
We add a "Fix me" button to the HTML from the previous example.
<form action="#" method="post"> <p> <label for="age">Your (21 to 65) </label> <input type="number" name="age" required min="21" max="65" /> </p> <p> <button type="submit">Submit</button> <button type="button">reportValidity()</button> <button type="button">Fix issues</button> </p> <p></p></form>JavaScript
We expand on the JavaScript from the basic example above, adding a function that used theHTMLInputElement.setCustomValidity() method to provide custom error messages. ThevalidateAge() function only sets the error message to an empty string if the input is valid AND theenableValidation variable istrue, withenableValidation beingfalse until the "fix issues" button has been activated.
const output = document.querySelector("#log");const reportButton = document.querySelector("#report");const ageInput = document.querySelector("#age");const fixButton = document.querySelector("#fix");let enableValidation = false;fixButton.addEventListener("click", (e) => { enableValidation = true; fixButton.innerHTML = "Error fixed"; fixButton.disabled = true;});reportButton.addEventListener("click", () => { validateAge(); const reportVal = ageInput.reportValidity(); output.innerHTML = `"reportValidity()" returned: ${reportVal}`; if (!reportVal) { output.innerHTML += `<br />Validation message: "${ageInput.validationMessage}"`; }});function validateAge() { const validityState = ageInput.validity; if (validityState.valueMissing) { ageInput.setCustomValidity("Please set an age (required)"); } else if (validityState.rangeUnderflow) { ageInput.setCustomValidity("Your value is too low"); } else if (validityState.rangeOverflow) { ageInput.setCustomValidity("Your value is too high"); } else if (enableValidation) { // sets to empty string if valid AND enableValidation has been set to true ageInput.setCustomValidity(""); }}Results
If you activate the "reportValidity()" button before entering an age, thereportValidity() method returnsfalse because it does not meetrequired constraint validation. This method fires aninvalid event on the input and reports the problem to the user, displaying the custom error message "Please set an age (required)". As long as a custom error message is set, activating the "reportValidity()" button will continue to display an error even if you select a valid age. To enable validation, we have to set the custom error message to the empty string, which is done by clicking the "Fix issues" button.
Specifications
| Specification |
|---|
| HTML # dom-cva-reportvalidity-dev |