HTML Constraint Validation API: Give Form Users Useful Feedback

HTML can catch several common form mistakes before a request is sent. The browser can tell a user that a required field is empty or that a value does not match an input type. These checks improve feedback, but they do not make the submitted data trustworthy.

Use built-in constraints first

<form id="contact-form">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Send</button>
</form>

The browser applies constraints such as required, min, max and appropriate input types. Labels and clear instructions still matter; a browser-generated message may not explain a business-specific rule.

Use the API for custom checks

The Constraint Validation API exposes validity state and methods such as checkValidity() and reportValidity(). If you set a custom message with setCustomValidity(), clear it again when the field becomes valid; otherwise the form remains invalid. Test keyboard use and assistive technology as well as mouse interaction.

Do not set novalidate unless the application intentionally replaces native validation and provides equivalent feedback. Avoid showing an error only through color; describe the field and issue in text.

Validate again on the server

Client-side checks can be bypassed by a modified request, an older browser or a script calling the endpoint directly. Validate types, lengths, allowed values and authorization on the server before storing or acting on data. Treat the browser as a helpful first check, not a security boundary.

For important forms, test empty, malformed and boundary values in both the browser and server response. The MDN constraint-validation guide documents the browser API and its limits.