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 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 id="age" min="21" max="65" />
</p>
<p>
<button type="submit">Submit</button>
<button type="button" id="report">reportValidity()</button>
</p>
<p id="log"></p>
</form>
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", () => {
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
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 to the console.
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 a "Fix me" button to the HTML from the previous example.
<button type="button" id="fix">Fix issues</button>
JavaScript
We expand on the JavaScript from the basic example above, adding a function that used the HTMLInputElement.setCustomValidity()
method to provide custom error messages. The validateAge()
function only sets the error message to an empty string if the input is valid AND the enableValidation
variable is true
, with enableValidation
being false
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}"`;
}
});
const validateAge = () => {
const validityState_object = ageInput.validity;
if (validityState_object.valueMissing) {
ageInput.setCustomValidity("Please set an age (required)");
} else if (ageInput.rangeUnderflow) {
ageInput.setCustomValidity("Your value is too low");
} else if (ageInput.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, 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. 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 Standard # dom-cva-reportvalidity-dev |
Browser compatibility
BCD tables only load in the browser