Quiz Entry - updated: 2026.07.14
How do you add client-side form validation in HTML?
HTML5 lets you validate user input right in the markup, using attributes like required, type="email", and min/max — no JavaScript needed.
"Client-side validation" means the browser checks the input before the form is sent, giving instant feedback. You declare the rules as attributes on the <input>:
| Attribute | Purpose | Example |
|---|---|---|
required |
The field must not be left empty | <input required> |
type="email" |
The value must look like an email address | <input type="email"> |
min / max |
A number must fall in the range min ≤ X ≤ max |
<input type="number" min="5" max="20"> |
minlength / maxlength |
Limits on text length | <input minlength="3"> |
pattern |
The value must match a regular expression | <input pattern="[A-Za-z]+"> |
For example:
<input type="text" id="name" required>
<input type="email" id="email">
<input type="number" id="age" min="18" max="120">
A crucial caveat: note that type="email" only checks the format (an @ and a domain), not that the address really exists. And more importantly, client-side validation is purely about user experience — it can be bypassed by anyone who edits the request, so it is not a security measure. You must always re-validate on the server as well.
Go deeper:
Client-side form validation — MDN — built-in attributes (required,pattern,min/max) plus the Constraint Validation API and why server-side checks are still mandatory.