फ़ॉर्म सत्यापन एट्रिब्यूट
required, minlength, maxlength, pattern, min, max और step एट्रिब्यूट लागू करें तथा :valid और :invalid स्यूडो-क्लास से सत्यापन अवस्थाओं को स्टाइल करें।
फ़ॉर्म सत्यापन एट्रिब्यूट, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
मूल ब्राउज़र सत्यापन
HTML5 विशेषताओं के माध्यम से अंतर्निहित फ़ॉर्म सत्यापन उपलब्ध कराता है। फ़ॉर्म सबमिट होने पर ब्राउज़र प्रत्येक फ़ील्ड का सत्यापन करता है। सत्यापन विफल होने पर यह मूल त्रुटि टूलटिप दिखाता है और सबमिशन रोक देता है — सामान्य मामलों के लिए JavaScript की आवश्यकता नहीं होती।
required
किसी इनपुट, select या textarea में required जोड़ने से वह अनिवार्य हो जाता है। फ़ॉर्म सबमिट होने पर फ़ील्ड खाली होने पर ब्राउज़र त्रुटि दिखाता है।
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength और maxlength
minlength वर्णों की न्यूनतम संख्या लागू करता है। maxlength अधिकतम सीमा से आगे इनपुट लेने से रोकता है। पासवर्ड की जटिलता लागू करने या टिप्पणियों की लंबाई सीमित करने के लिए दोनों को साथ में उपयोग करें।
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>संख्यात्मक इनपुट के लिए min, max और step
min और max संख्या और दिनांक इनपुट के लिए मान्य सीमा निर्धारित करते हैं। step वृद्धि निर्धारित करता है — यह रेंज (5%), दशमलव परिशुद्धता और केवल दिनांक के लिए उपयोगी है।
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — नियमित व्यंजक सत्यापन
pattern JavaScript के नियमित व्यंजक को स्वीकार करता है। फ़ॉर्म सबमिट होने के लिए इनपुट का पैटर्न से मेल खाना आवश्यक है। ब्राउज़र की त्रुटि टूलटिप में अपेक्षित प्रारूप बताने के लिए title शामिल करें।
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — मूल सत्यापन अक्षम करना
सभी मूल ब्राउज़र सत्यापन अक्षम करने के लिए <form> तत्व में novalidate जोड़ें। कस्टम JavaScript सत्यापन लागू करते समय ऐसा करें, ताकि उपयोगकर्ता को एकसमान अनुभव मिले।
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>JavaScript में वैधता जाँचना
Constraint Validation API आपको प्रोग्राम के माध्यम से वैधता जाँचने देता है: input.validity (ValidityState ऑब्जेक्ट), input.checkValidity() (बूलियन लौटाता है), input.setCustomValidity(message) (कस्टम त्रुटि सेट करता है)।
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
किसी इनपुट को कस्टम संदेश के साथ अमान्य चिह्नित करने के लिए setCustomValidity(message) को गैर-रिक्त स्ट्रिंग के साथ कॉल करें। त्रुटि हटाने के लिए इसे रिक्त स्ट्रिंग के साथ कॉल करें। यह username की विशिष्टता जैसे सर्वर द्वारा सत्यापित फ़ील्ड के लिए उपयोगी है।
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}:valid और :invalid छद्म-वर्ग
मान्य और अमान्य इनपुट को CSS छद्म-वर्गों से स्टाइल करें। सावधान रहें: उपयोगकर्ता के उनसे इंटरैक्ट करने से पहले ही इनपुट :invalid होते हैं। पहले ‘स्पर्शित’ वर्ग जोड़ने के लिए :user-invalid (आधुनिक ब्राउज़र) या JavaScript का उपयोग करें।
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }reportValidity के साथ कस्टम त्रुटि संदेश
form.reportValidity() सभी फ़ील्ड पर ब्राउज़र का मूल वैधता-जाँच इंटरफ़ेस दिखाता है। कस्टम वैधता संदेश सेट करने के बाद इसका उपयोग करें, ताकि सबमिट घटना की प्रतीक्षा किए बिना वे उपयोगकर्ता को दिखाई दें।
सुलभ त्रुटि प्रदर्शन का पैटर्न
इनलाइन त्रुटियाँ इस प्रकार दिखाएँ: 1) इनपुट पर aria-invalid="true", 2) aria-describedby से जुड़े हुए दिखाई देने वाले त्रुटि अनुच्छेद का उपयोग, 3) फ़ोकस को पहले अमान्य फ़ील्ड पर ले जाएँ। इससे स्क्रीन रीडर इस्तेमाल करने वाले उपयोगकर्ताओं समेत सभी उपयोगकर्ताओं को सुविधा मिलती है।
त्वरित जाँच
कौन-सी विशेषता टेक्स्ट इनपुट को अधिकतम 280 अक्षरों तक सीमित करती है?
पुनरावलोकन: फ़ॉर्म वैधता-जाँच की विशेषताएँ
required, minlength/maxlength, min/max/step, pattern — ये सभी ब्राउज़र की मूल वैधता-जाँच निःशुल्क उपलब्ध कराते हैं। कस्टम JS वैधता-जाँच लागू करते समय novalidate का उपयोग करें। Constraint Validation API JavaScript को वैधता स्थिति तक पहुँच देता है। उपयोगकर्ता के इंटरैक्ट करने के बाद :user-invalid से त्रुटियों को स्टाइल करें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “फ़ॉर्म सत्यापन एट्रिब्यूट” पाठ निःशुल्क है?
हाँ—“फ़ॉर्म सत्यापन एट्रिब्यूट” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“फ़ॉर्म सत्यापन एट्रिब्यूट” में मैं क्या सीखूँगा?
required, minlength, maxlength, pattern, min, max और step एट्रिब्यूट लागू करें तथा :valid और :invalid स्यूडो-क्लास से सत्यापन अवस्थाओं को स्टाइल करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“फ़ॉर्म सत्यापन एट्रिब्यूट” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- फ़ॉर्म नियंत्रण: input प्रकार, select, textarea
- ARIA और सुलभता: label, role, aria-*
- अर्थपूर्ण HTML5: semantic बनाम div soup
- फ़ॉर्म सत्यापन एट्रिब्यूट