HTML provides built-in validation via attributes, so the browser blocks invalid submissions and shows messages — no JavaScript required.
html
Submit
HTML provides built-in validation via attributes, so the browser blocks invalid submissions and shows messages — no JavaScript required.
Submit
The validation attributes: required, min/max, minlength/maxlength, pattern (regex), and the type itself (email, url, number). On submit, the browser checks them, stops submission if any fails, and shows a native bubble on the first invalid field.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
You can read and customize validation in JavaScript:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidity lets you add rules the attributes can't express (e.g. "confirm password matches").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Always validate on the server too — client validation is for UX; users can bypass it.
Native validation gives you accessible, localized error messages and instant feedback for free.
Combine the declarative attributes with the Constraint Validation API for custom rules — but never trust it as your only line of defense; the server must validate as well.