JavaScript Academy · पाठ

Constraint Validation API

पहले से उपलब्ध वैधता-जाँच का उपयोग कीजिए।

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

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

अंतर्निहित सत्यापन

HTML फ़ॉर्म फ़ील्ड required, min, max, pattern और type="email" जैसे attributes का समर्थन करते हैं। बाध्यता सत्यापन एपीआई JavaScript को इस अंतर्निहित सत्यापन की जाँच और नियंत्रण करने देता है।

checkValidity

checkValidity बूलियन लौटाता है और विफल हो रहे प्रत्येक नियंत्रण पर invalid इवेंट सक्रिय करता है, लेकिन ब्राउज़र का पॉपअप नहीं दिखाता।

const email = document.querySelector("#email");
console.log(email.checkValidity());

reportValidity

reportValidity, checkValidity की तरह काम करता है, लेकिन अमान्य फ़ील्ड के लिए ब्राउज़र का सत्यापन संदेश इंटरफ़ेस भी दिखाता है।

if (!form.reportValidity()) {
  console.log("show built-in errors");
}

validity ऑब्जेक्ट

प्रत्येक नियंत्रण में बूलियन फ़्लैग वाला validity ऑब्जेक्ट होता है, जो ठीक-ठीक बताता है कि क्या गलत है।

console.log(email.validity.valueMissing);  // empty required
console.log(email.validity.typeMismatch);  // wrong format
console.log(email.validity.tooShort);

validity.valid

validity.valid तभी true होता है जब फ़ील्ड हर बाध्यता को पूरा करता है और अन्य फ़्लैग का सार प्रस्तुत करता है।

if (email.validity.valid) {
  console.log("ok");
}

validationMessage

validationMessage में वह स्थानीयकृत संदेश होता है, जिसे ब्राउज़र वर्तमान त्रुटि के लिए दिखाता।

console.log(email.validationMessage);

setCustomValidity

setCustomValidity आपके अपने संदेश के साथ फ़ील्ड को अमान्य चिह्नित करता है। खाली न होने वाली स्ट्रिंग का अर्थ अमान्य है; खाली स्ट्रिंग इसे साफ़ कर देती है।

function checkMatch() {
  if (pass.value !== confirm.value) {
    confirm.setCustomValidity("Passwords must match");
  } else {
    confirm.setCustomValidity("");
  }
}

कस्टम त्रुटियाँ हमेशा साफ़ करें

यदि आप कस्टम संदेश सेट करते हैं, तो मान्य होने पर उसे खाली स्ट्रिंग से साफ़ करना आवश्यक है। अन्यथा फ़ील्ड हमेशा अमान्य बनी रहेगी।

confirm.addEventListener("input", () => {
  confirm.setCustomValidity("");
  checkMatch();
});

invalid इवेंट

सत्यापन विफल होने पर कस्टम तर्क चलाने के लिए invalid इवेंट सुनें, जैसे किसी फ़ील्ड की शैली बदलना।

email.addEventListener("invalid", () => {
  email.classList.add("error");
});

मूल पॉपअप अक्षम करना

मूल पॉपअप दबाने के लिए फ़ॉर्म में novalidate जोड़ें और फिर भी अपने संदेशों के लिए एपीआई का उपयोग करें।

form.setAttribute("novalidate", "");
form.addEventListener("submit", (e) => {
  if (!form.checkValidity()) e.preventDefault();
});

:valid और :invalid से शैली देना

CSS छद्म-क्लास :valid और :invalid फ़ील्ड की सत्यापन स्थिति के आधार पर उनकी शैली अपने आप बदलते हैं।

त्वरित जाँच

कस्टम सत्यापन नियम।

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

पुनरावलोकन

बाध्यता सत्यापन एपीआई HTML की बाध्यता attributes के साथ काम करता है। त्रुटियों की जाँच करने और वैकल्पिक रूप से उन्हें दिखाने के लिए checkValidity/reportValidity का उपयोग करें, validity फ़्लैग और validationMessage की जाँच करें, तथा setCustomValidity से कस्टम नियम जोड़ें और उन्हें खाली स्ट्रिंग से साफ़ करें। invalid इवेंट और :valid/:invalid CSS शैली देने में सहायक हैं।

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

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

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

पाठ्यक्रम: 59
पाठ: 200

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

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

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

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

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

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

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

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

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

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

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

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

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

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