HTML Academy · पाठ

Constraint Validation API

JavaScript से वैधता स्थितियाँ पढ़ें और प्रतिबंध जाँचें

पाठ 2, कुल 4 में से13 चरण

Constraint Validation API, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

JavaScript के बिना सत्यापन

HTML के पाँचवें संस्करण ने इन गुणों के माध्यम से फ़ॉर्म का अंतर्निर्मित सत्यापन प्रस्तुत किया: required, type="email", type="number", min, max, pattern, minlength, maxlength। सबमिट करते समय ब्राउज़र अपने-आप सत्यापन करता है और त्रुटि संदेश दिखाता है; इसके लिए JS की आवश्यकता नहीं होती।

<input type="email" name="email" required>
<input type="number" name="age" min="18" max="120" required>
<input type="text" name="phone" pattern="\d{10}" required>

CSS सत्यापन चयनकर्ता

:invalid उन इनपुट से मेल खाता है जो सत्यापन में विफल होते हैं; :valid उन इनपुट से मेल खाता है जो सत्यापन में सफल होते हैं। :user-invalid (आधुनिक) केवल उपयोगकर्ता की सहभागिता के बाद मेल खाता है—इससे बिना छेड़े गए फ़ॉर्म पर लाल बॉर्डर दिखाई देने से बचता है। इन छद्म-वर्गों से त्रुटियों की शैली निर्धारित करें।

input:user-invalid {
  border-color: red;
}
input:user-invalid + .error {
  display: block;
}

ValidityState वस्तु

हर फ़ॉर्म नियंत्रण एक validity प्रॉपर्टी उपलब्ध कराता है—यह ValidityState वस्तु होती है, जिसमें बूलियन संकेतक होते हैं: valid, valueMissing, typeMismatch, patternMismatch, rangeUnderflow, tooShort आदि। कौन-सी त्रुटि दिखानी है, यह तय करने के लिए इसकी जाँच करें।

const input = form.querySelector("input[type=email]");
if (input.validity.typeMismatch) {
  showError(input, "Please enter a valid email address");
}

checkValidity विधि

input.checkValidity() तब true लौटाता है जब मान सभी प्रतिबंधों को पूरा करता है, अन्यथा false लौटाता है। form.checkValidity() पूरे फ़ॉर्म की जाँच करता है। यह AJAX करने से पहले या किसी क्रमिक फ़ॉर्म में उपयोगकर्ता को आगे बढ़ने देने से पहले प्रोग्राम के माध्यम से जाँच करने के लिए उपयोगी है।

reportValidity विधि

input.reportValidity() checkValidity की तरह काम करता है, लेकिन इसके अतिरिक्त ब्राउज़र का अंतर्निर्मित टूलटिप दिखाता है और पहले अमान्य फ़ील्ड पर फ़ोकस करता है। जब आप बिना अतिरिक्त प्रयास के मूल ब्राउज़र इंटरफ़ेस चाहते हों, तब इसका उपयोग करें; जब आप त्रुटियों का प्रदर्शन पूरी तरह स्वयं नियंत्रित करना चाहते हों, तब checkValidity का उपयोग करें।

अंतर्निर्मित संदेशों को अनुकूलित करना

ब्राउज़र के डिफ़ॉल्ट संदेश ("कृपया यह फ़ील्ड भरें") आपके लहजे या भाषा से मेल नहीं खा सकते। इन्हें input.setCustomValidity("Enter a valid coupon code") से बदलें। setCustomValidity("") से संदेश हटाने तक इनपुट अमान्य रहता है।

novalidate से ब्राउज़र इंटरफ़ेस बंद करना

ब्राउज़र के डिफ़ॉल्ट सत्यापन व्यवहार को रोकने के लिए फ़ॉर्म पर novalidate जोड़ें। यह पूरी तरह कस्टम त्रुटि प्रदर्शन लागू करते समय उपयोगी है—फ़ॉर्म सबमिट हो जाता है, चाहे वह सत्यापन में सफल होता या नहीं; इसलिए सबमिट करने से पहले प्रोग्राम के माध्यम से जाँच करें।

अमान्य घटनाओं को सुनना

सत्यापन विफल होने पर हर नियंत्रण एक invalid घटना उत्पन्न करता है। डिफ़ॉल्ट टूलटिप को रोकने और कस्टम संदेश दिखाने के लिए इसे सुनें: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input); })।

नियमित व्यंजकों वाला पैटर्न

pattern गुण में JavaScript का नियमित व्यंजक होता है, जिससे मान का पूरी तरह मेल खाना आवश्यक है (और ^ तथा $ एंकर लगाने की आवश्यकता नहीं होती—वे अपने-आप माने जाते हैं)। उपयोगकर्ताओं को अपेक्षित प्रारूप समझाने के लिए इसे title गुण के साथ जोड़ें।

सर्वर पर सत्यापन अभी भी आवश्यक है

HTML सत्यापन उपयोगकर्ताओं की सुविधा के लिए है; DOM में बदलाव करने वाला कोई भी व्यक्ति इसे दरकिनार कर सकता है। सर्वर पर हमेशा दोबारा सत्यापन करें। HTML प्रतिबंध सुरक्षा के लिए नहीं, बल्कि बेहतर उपयोगकर्ता अनुभव (तुरंत प्रतिक्रिया और कम नेटवर्क अनुरोधों) के लिए होते हैं।

कई प्रतिबंधों का संयोजन

प्रतिबंध एक साथ लागू होते हैं: <input type="number" min="18" max="120" required step="1"> में मान होना चाहिए, वह पूर्णांक होना चाहिए और 18 से 120 के बीच होना चाहिए। कौन-सा विशिष्ट प्रतिबंध विफल हुआ, यह ब्राउज़र ValidityState संकेतकों के माध्यम से उपलब्ध कराता है, ताकि आप सही संदेश दिखा सकें।

ज्ञान जाँच

:user-invalid CSS छद्म-वर्ग :invalid से कैसे अलग है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

मूल सत्यापन गुण (required, type, pattern, min, max) और ValidityState API मिलकर डिफ़ॉल्ट रूप से बिना JS के शक्तिशाली क्लाइंट-पक्षीय सत्यापन उपलब्ध कराते हैं। CSS का :user-invalid छद्म-वर्ग सहभागिता के बाद त्रुटियों की शैली निर्धारित करता है। checkValidity/reportValidity प्रोग्राम के माध्यम से जाँच कराते हैं। setCustomValidity डिफ़ॉल्ट संदेशों को बदलता है। सर्वर पर हमेशा दोबारा सत्यापन करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Constraint Validation API” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Constraint Validation API” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Constraint Validation API” में मैं क्या सीखूँगा?

JavaScript से वैधता स्थितियाँ पढ़ें और प्रतिबंध जाँचें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“Constraint Validation API” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ