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.
The reportValidity() method of the HTMLInputElement interface performs the same validity checking steps as the checkValidity() method. In addition, if the invalid event is not canceled, the browser displays the problem to the user.
Syntax
reportValidity()
Parameters
None.
Return value
Returns true if the element's value has no validity problems; otherwise, returns false.
Examples
Basic usage
HTML
We include a required number field and a button to report its validity.
<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="button" id="report">reportValidity()</button>
</p>
<pre id="log"></pre>
JavaScript
When the "reportValidity()" button is activated, we use the reportValidity() method to check if the input's value meets its constraints. We log the return value. If false, we also display the validation message and capture the invalid event.
const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");
ageInput.addEventListener("invalid", () => {
output.textContent += "Invalid event fired.\n";
});
reportButton.addEventListener("click", () => {
output.textContent = "";
const reportVal = ageInput.reportValidity();
output.textContent += `"reportValidity()" returned: ${reportVal}`;
if (!reportVal) {
output.textContent += `\nValidation message: "${ageInput.validationMessage}"`;
}
});
Results
When false, 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 in the output.
Custom error message
This example demonstrates how a custom error message can cause a false return value when the value is otherwise valid.
HTML
We add an "Allow resetting" checkbox to the HTML from the previous example.
JavaScript
We expand on the JavaScript from the basic example above, adding a function that uses the HTMLInputElement.setCustomValidity() method to provide custom error messages. The validateAge() function only sets the error message to an empty string if the age meets the checked constraints and the "Allow resetting" checkbox is checked.
Results
If you activate the "reportValidity()" button before entering an age, the reportValidity() method returns false because it does not meet required constraint validation. This method fires an invalid 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. Select "Allow resetting", then activate "reportValidity()" again with a valid age to clear the custom error message. Clearing the checkbox prevents subsequent checks from clearing a custom error message.
Specifications
| Specification |
|---|
| HTML # dom-cva-reportvalidity-dev |