Sometimes, we want to manually show a HTML5 validation message from a JavaScript function.
In this article, we’ll look at how to manually show a HTML5 validation message from a JavaScript function.
How to manually show a HTML5 validation message from a JavaScript function?
To manually show a HTML5 validation message from a JavaScript function, we can call the reportValidity method.
For instance, we write:
<form>
<input type="email" id="email" placeholder="email" required>
<button type="submit">Submit</button>
</form>
to add a form.
Then we write:
const form = document.querySelector("form");
if (form.checkValidity()) {
form.submit();
} else {
form.reportValidity();
}
We select the form with document.querySelector.
Then we call checkValidity to validate the form values.
Then we call reportValidity when there are invalid form values.
As a result, we should see form validation messages.
Conclusion
To manually show a HTML5 validation message from a JavaScript function, we can call the reportValidity method.
