HTMLMedium
What form validation does HTML provide out of the box?
By FrontendPro Editorial Team Updated 8/14/2026
#html#forms#validation
Answer
The Constraint Validation API is built in: required, type="email|url|number", min, max, minlength, maxlength, pattern, step.
html
<form novalidate>
<input name="email" type="email" required />
<input name="age" type="number" min="18" max="120" />
</form>
js
input.validity.valueMissing; // true when empty
input.setCustomValidity("A work email is required");
input.checkValidity();
novalidatesuppresses the default bubbles so you can render your own UI; the API still works.- CSS hooks:
:valid,:invalid,:user-invalid(only after the user interacted - prefer this one). - Client validation never replaces server validation.
