HTML Form Validation
HTML5 added built-in form validation attributes that check user input before sending to the server — no JavaScript needed. The browser handles error messages automatically in the user's language.
Required Fields
Example — required Attribute
<form> <label for="email">Email *</label> <input type="email" id="email" required placeholder="you@example.com"/> <button type="submit">Submit</button> </form>
Try clicking Submit with an empty or invalid email. The browser shows a validation error automatically.
Min, Max, and Pattern
Example — Validation Constraints
<!-- Number between 1 and 100 --> <input type="number" min="1" max="100" required/> <!-- Text must match pattern (Indian mobile) --> <input type="text" pattern="[6-9][0-9]{9}" title="10-digit Indian mobile number" required/> <!-- Password: min 8 characters --> <input type="password" minlength="8" maxlength="64" required/>
pattern uses a regex to validate format. title shows as the error message hint when the pattern fails.
Visual Feedback with CSS
Example — :valid and :invalid Pseudo-classes
<style> /* Green border when valid */ input:valid { border-color: green; } /* Red border when invalid and user has typed */ input:invalid:not(:placeholder-shown) { border-color: red; } </style>
:not(:placeholder-shown) prevents showing red border on empty fields that the user has not touched yet.
Validation AttributesReference
requiredField must be filled before form submits
min maxMinimum and maximum value for number and date inputs
minlength maxlengthMinimum and maximum character count for text inputs
patternRegex pattern the value must match. Use title for the error hint
type="email"Built-in email format validation. Checks for @ and domain
type="url"Built-in URL validation. Must start with http:// or https://
novalidateOn form tag — disables built-in validation for custom JS validation
Client vs Server Validation
HTML validation runs in the browser but can be bypassed by anyone. Always also validate on the server. HTML validation is for user experience — quick feedback without a page reload. Server validation is for security.
Before HTML5 Validation
Before 2014 every form needed JavaScript validation manually coded. Developers wrote hundreds of lines to check emails, numbers, and required fields. HTML5 built-in validation replaced most of that with simple attributes.