reportValidity and setCustomValidity
Trigger browser validation UI and set custom error messages.
Two APIs for Built-in UX
The Constraint Validation API exposes two methods that drive the browser's built-in validation UI: reportValidity (show the tooltip) and setCustomValidity (provide a custom error message). Together they let you customize messages while keeping the native presentation.
reportValidity vs checkValidity
checkValidity() silently returns true/false — no UI side effects. reportValidity() does the same check but additionally focuses the first invalid field and shows the browser's validation tooltip. Choose reportValidity when you want native UX for free.
document.forms.signup.addEventListener("submit", (e) => {
if (!e.target.reportValidity()) {
e.preventDefault();
// browser already focused first invalid field and showed tooltip
}
});All lessons in this course
- The FormData API
- The Constraint Validation API
- reportValidity and setCustomValidity
- Form Reset Events and State Management