2026 में फॉर्म वैलिडेशन: अनावश्यक रूप से लाइब्रेरीज़ का उपयोग करना बंद करें

2026 में फॉर्म को वैलिडेट करने के लिए आपको किसी भारी JavaScript लाइब्रेरी की आवश्यकता नहीं है।

मैंने पिछले महीने बिना किसी वैलिडेशन लाइब्रेरी के एक चेकआउट फॉर्म तैयार किया। इसने केवल नेटिव HTML और JavaScript की 30 लाइनों का उपयोग करके आवश्यक फ़ील्ड्स (required fields), ईमेल फॉर्मेट और पासवर्ड की लंबाई को संभाला।

npm install चलाने से पहले, अधिकांश समस्याओं को हल करने के लिए इन छह नेटिव एट्रिब्यूट्स का उपयोग करें:

• required: टेक्स्ट, सेलेक्ट्स और चेकबॉक्स के लिए खाली सबमिशन को रोकता है। • type: बुनियादी फॉर्मेट की गलतियों को पकड़ने के लिए type="email" या type="url" का उपयोग करें। • minlength और maxlength: कस्टम लॉजिक के बिना कैरेक्टर लिमिट लागू करते हैं। • min, max, और step: नंबरों और तारीखों के लिए रेंज को नियंत्रित करते हैं। • pattern: पोस्टल कोड जैसे विशिष्ट फॉर्मेट लागू करने के लिए regex का उपयोग करता है। • inputmode और autocomplete: सही कीबोर्ड दिखाकर या ज्ञात डेटा भरकर गलतियों को कम करते हैं।

यदि नेटिव मैसेज बहुत सामान्य (generic) हैं, तो Constraint Validation API का उपयोग करें।

प्रत्येक इनपुट में एक validity ऑब्जेक्ट होता है। मददगार एरर मैसेज लिखने के लिए आप valueMissing या typeMismatch जैसी प्रॉपर्टीज़ की जांच कर सकते हैं। अपना स्वयं का टेक्स्ट दिखाने के लिए setCustomValidity का उपयोग करें।

input इवेंट पर अपने कस्टम मैसेज को क्लियर करना न भूलें। यदि आप ऐसा नहीं करते हैं, तो उपयोगकर्ता द्वारा सुधार करने के बाद भी फ़ील्ड एरर स्टेट में ही फंसा रहेगा।

स्टाइलिंग के लिए, यह ट्रैक करने के लिए JavaScript का उपयोग करना बंद करें कि कोई फ़ील्ड "touched" है या नहीं।

अब CSS :user-invalid pseudo-class इसे संभालती है। यह केवल तभी स्टाइल लागू करती है जब उपयोगकर्ता किसी फ़ील्ड के साथ इंटरैक्ट करता है। एरर टेक्स्ट को स्वचालित रूप से दिखाने के लिए इसे :has() सिलेक्टर के साथ जोड़ें। इससे दर्जनों लाइनों का अनावश्यक कोड हट जाता है।

आपको वास्तव में लाइब्रेरी का उपयोग कब करना चाहिए?

केवल इन दो विशिष्ट मामलों में ही लाइब्रेरी का सहारा लें:

  1. क्रॉस-फ़ील्ड वैलिडेशन (Cross-field validation): जब एक फ़ील्ड दूसरे पर निर्भर हो, जैसे "confirm password" या जटिल कंडीशनल लॉजिक।
  2. एसिंक वैलिडेशन (Async validation): जब आपको डेटाबेस चेक करने की आवश्यकता हो, जैसे "क्या यह यूजरनेम पहले से लिया जा चुका है?"

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

स्रोत: https://dev.to/raxxostudios/form-validation-in-2026-6-native-constraints-before-you-reach-for-a-library-3474

वैकल्पिक लर्निंग कम्युनिटी: https://t.me/GyaanSetuAi