HTMLInputElement: checkValidity() 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 checkValidity()
method of the HTMLInputElement
interface returns a boolean value which indicates if the element meets any constraint validation rules applied to it. If false, the method also fires an invalid
event on the element. Because there's no default browser behavior for checkValidity()
, canceling this invalid
event has no effect.
Note: An HTML <input>
element with a non-null validationMessage
is considered invalid, will match the CSS :invalid
pseudo-class, and will cause checkValidity()
to return false. Use the HTMLInputElement.setCustomValidity()
method to set the HTMLInputElement.validationMessage
to the empty string to set the validity
state to be valid.
Syntax
checkValidity()
Parameters
None.
Return value
Returns true
if the element's value has no validity problems; otherwise, returns false
.
Examples
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="check">checkValidity()</button>
</p>
<p id="log"></p>
</form>
JavaScript
const output = document.querySelector("#log");
const checkButton = document.querySelector("#check");
const ageInput = document.querySelector("#age");
ageInput.addEventListener("invalid", () => {
console.log("Invalid event fired.");
});
checkButton.addEventListener("click", () => {
const checkVal = ageInput.checkValidity();
output.innerHTML = `checkValidity returned: ${checkVal}`;
});
Results
When false
, if the value is missing, below 21, above 65, or otherwise invalid, the invalid event will be logged to the console. To report the error to the user, use HTMLInputElement.reportValidity()
instead.
Specifications
Specification |
---|
HTML Standard # dom-cva-checkvalidity-dev |
Browser compatibility
BCD tables only load in the browser