HTML इनपुट वैलिडेशन

Required और Length वैलिडेशन

required attribute किसी field के खाली होने पर form submission रोकता है। minlength और maxlength यह control करते हैं कि input कितना छोटा या लंबा हो सकता है। ये built-in checks form को server पर भेजे जाने से पहले पूरी तरह browser में ही चलते हैं।

उदाहरण: Required and Length Validation

<input type="text" required minlength="3" maxlength="10">

पैटर्न वैलिडेशन

pattern attribute एक regular expression accept करता है जिससे input value को match करना ज़रूरी होता है। यह आपको postal codes, product IDs, या usernames जैसे custom formats validate करने देता है।

चूँकि pattern सिर्फ structure चेक करता है, आपको server पर भी यही rule फिर से validate करनी चाहिए क्योंकि client-side checks को bypass किया जा सकता है।

उदाहरण: Pattern Validation

<input type="text" pattern="[0-9]{5}" title="Enter a 5-digit postal code">

नंबर रेंज वैलिडेशन

number inputs के लिए, min और max allowed range तय करते हैं। step attribute values के बीच allowed increment control करता है। min, max, और step सेट होते ही browsers अपने आप एक छोटा increment/decrement arrow UI दिखाते हैं।

उदाहरण: Number Range Validation

<input type="number" min="1" max="10" step="1">

Email और URL टाइप वैलिडेशन

किसी input का type email या url सेट करने से browser बिना कोई custom validation logic लिखे यह अपने आप चेक कर लेता है कि दी गई value एक valid email address या web address जैसी दिखती है, form submit होने से पहले।

उदाहरण: Email and URL Type Validation

<input type="email" required>
<input type="url" required>

कस्टम वैलिडेशन मैसेजेस

setCustomValidity method, pattern के साथ दिखने वाले title attribute के साथ मिलकर, आपको browser के generic 'Please match the requested format' message की जगह ऐसा wording देने देता है जो असल में यह समझाए कि user को क्या ठीक करना है।

उदाहरण: Custom Validation Messages

<input type="text" oninvalid="this.setCustomValidity('Please enter your full name')">