उन्नत फ़ॉर्म और नेटिव वैलिडेशन

किसी भी बाहरी लाइब्रेरी के बिना मज़बूत फ़ॉर्म के लिए required, pattern, inputmode, और Constraint Validation API का लाभ उठाएं।

10 मिनट · 3 प्रश्न

ब्राउज़र एक संपूर्ण वैलिडेशन इंजन के साथ आता है जिसे कई टीमें आदतन JavaScript में दोबारा लागू करती हैं। बुनियादी घटक: required (अनिवार्य फ़ील्ड), वे टाइप (email, url, date) जो फ़ॉर्मैट को वैलिडेट करते हैं, minlength/maxlength, संख्यात्मक मानों के लिए min/max/step, और pattern, जो एक रेगुलर एक्सप्रेशन स्वीकार करता है। महत्वपूर्ण बात: pattern अंतर्निहित रूप से एंकर है - पूरा मान मेल खाना चाहिए, मानो रेगेक्स को ^ और $ में लपेटा गया हो। मानकीकृत मानों (postal-code, email, tel) के साथ autocomplete जोड़ें: यह UX और एक्सेसिबिलिटी दोनों है।

<label for="zip">Postal code</label>
<input id="zip" name="zip" type="text"
       required pattern="[0-9]{5}"
       inputmode="numeric"
       autocomplete="postal-code">

inputmode एट्रिब्यूट को अक्सर गलत समझा जाता है: यह कुछ भी वैलिडेट नहीं करता। यह केवल मोबाइल सिस्टम को बताता है कि कौन सा वर्चुअल कीबोर्ड दिखाना है (numeric, tel, email, decimal, search)। इसीलिए type="text" + inputmode="numeric" + pattern का मेल संख्यात्मक कोड के लिए अनुशंसित पैटर्न है: आपको सही कीबोर्ड मिलता है बिना type="number" के व्यवहारों को विरासत में लिए।

input:user-invalid {
  border: 2px solid #b3261e;
}
input:user-valid {
  border: 2px solid #1b5e20;
}

CSS की ओर, :invalid के बजाय :user-invalid को प्राथमिकता दें: पहला वाला पृष्ठ लोड होते ही लागू हो जाता है, उन फ़ील्ड को लाल रंग देता है जिन्हें उपयोगकर्ता ने अभी छुआ तक नहीं है। JavaScript की ओर, Constraint Validation API टूलकिट को पूरा करता है: checkValidity() जाँच शुरू करता है, validity ऑब्जेक्ट सटीक कारण (patternMismatch, valueMissing, tooShort) उजागर करता है, और setCustomValidity() आपको ब्राउज़र के सामान्य संदेशों को अपने संदेशों से बदलने देता है।

const zip = document.querySelector("#zip");
zip.addEventListener("input", () => {
  if (zip.validity.patternMismatch) {
    zip.setCustomValidity("Enter 5 digits.");
  } else {
    zip.setCustomValidity("");
  }
});

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. inputmode="numeric" वास्तव में क्या करता है?
   • किसी भी गैर-संख्यात्मक इनपुट को अस्वीकार करता है
   • फ़ील्ड के मान को एक संख्या में बदलता है
   • मोबाइल पर एक संख्यात्मक कीबोर्ड सुझाता है, बिना कुछ वैलिडेट किए
2. pattern="[0-9]{5}" के साथ, क्या मान "abc12345" स्वीकार किया जाता है?
   • हाँ, क्योंकि इसमें 5 लगातार अंक हैं
   • नहीं, क्योंकि pattern पूरे मान को मेल खाने की आवश्यकता रखता है
   • हाँ, यदि फ़ील्ड required नहीं है
3. एरर की स्टाइलिंग के लिए :invalid के बजाय :user-invalid को प्राथमिकता क्यों दें?
   • :user-invalid केवल तब लागू होता है जब उपयोगकर्ता ने इंटरैक्ट कर लिया हो
   • :invalid हाल के ब्राउज़रों द्वारा समर्थित नहीं है
   • :user-invalid अक्षम फ़ील्ड को भी वैलिडेट करता है