Forms
Form Validation
required, pattern, min/max
💡 HTML validation ek security guard hai jo form submit hone se PEHLE check karta hai sab kuch sahi bhara hai — bina server tak jaane, browser khud galtiyaan pakad leta hai aur user ko turant batata hai.
required attribute field ko mandatory banata hai. pattern attribute regex se custom validation deta hai (jaise specific format). min/max number/date ranges ke liye. minlength/maxlength text length ke liye. Browser automatically error messages dikhata hai agar validation fail ho.
<form>
<input type="text" required placeholder="Naam (required)">
<input type="email" required placeholder="Valid email chahiye">
<input type="text" pattern="[0-9]{10}" placeholder="10-digit phone number"
title="Please enter a valid 10-digit number">
<input type="number" min="18" max="100" placeholder="Age (18-100)">
<input type="password" minlength="8" required placeholder="Min 8 characters">
<button type="submit">Submit</button>
</form>✅
HTML validation ek security guard hai jo form submit hone se PEHLE check karta hai sab kuch sahi bhara hai — bina server tak jaane, browser khud galtiyaan pakad leta hai aur user ko turant batata hai.
1 / 2
⚡ Quick Recap
- required, pattern, min/max, minlength/maxlength — built-in validation
- Browser automatically error UI dikhata hai
- Client-side validation UX ke liye, security ke liye server-side bhi zaroori
On this page (2 subtopics)
Browser ke default validation messages generic hote hain ("Please fill out this field"). JavaScript ke setCustomValidity() se custom, user-friendly messages de sakte ho, ya title attribute se pattern validation ke liye hint.
<input type="text" pattern="[A-Za-z]{3,}"
title="Kam se kam 3 letters, sirf alphabets">
<!-- JavaScript se custom message: -->
<!-- input.setCustomValidity("Ye username already liya gaya hai"); -->Tip: title attribute pattern-based validation ke liye Chrome/Firefox mein tooltip ki tarah dikhta hai jab validation fail ho — user ko batata hai exactly kya format chahiye.
Kabhi-kabhi (jaise "Save as Draft" button ke liye) built-in validation skip karni hoti hai — form tag par novalidate attribute, ya specific button par formnovalidate.
<form action="/submit" method="POST">
<input type="email" required>
<button type="submit">Submit (validated)</button>
<button type="submit" formnovalidate>Save as Draft (skip validation)</button>
</form>Tip: formnovalidate specific button par sirf usी button ke liye validation skip karta hai — form ke baaki buttons still normal validation follow karenge.