HTMLInputElement: checkValidity() method - Web APIs | MDN
Syntax
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.
html
<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
js
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 # dom-cva-checkvalidity-dev |