𝟮𝗼𝟮𝟲 𝗺𝗲𝗱𝗵𝗶𝗹 𝗙𝗼𝗿𝗺 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻: 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀𝗰𝗵𝗮 𝗮𝗻𝗮𝘆𝗼𝗰𝘁 𝘃𝗮𝗽𝗮𝗿 𝗸𝗮𝗿𝗻𝗲 𝘁𝗵𝗮𝗮𝗻𝗯𝗮𝘃𝗮
२०२६ मध्ये फॉर्म व्हॅलिडेट करण्यासाठी तुम्हाला कोणत्याही जड (heavy) JavaScript लायब्ररीची गरज नाही.
गेल्या महिन्यात मी कोणत्याही व्हॅलिडेशन लायब्ररीचा वापर न करता एक चेकआउट फॉर्म तयार केला. केवळ नेटिव्ह HTML आणि ३० ओळींच्या JavaScript चा वापर करून मी आवश्यक फील्ड्स (required fields), ईमेल फॉरमॅट आणि पासवर्डची लांबी हाताळली.
npm install करण्यापूर्वी, बहुतेक समस्या सोडवण्यासाठी या सहा नेटिव्ह ॲट्रिब्युट्सचा (native attributes) वापर करा:
• required: टेक्स्ट, सिलेक्ट्स आणि चेकबॉक्सेससाठी रिकामे सबमिशन रोखते.
• type: मूलभूत फॉरमॅटमधील चुका पकडण्यासाठी type="email" किंवा type="url" वापरा.
• minlength आणि maxlength: कोणत्याही कस्टम लॉजिकशिवाय कॅरेक्टर मर्यादा लागू करते.
• min, max, आणि step: नंबर्स आणि तारखांच्या रेंजवर नियंत्रण ठेवते.
• pattern: पोस्टल कोडसारखे विशिष्ट फॉरमॅट लागू करण्यासाठी regex चा वापर करते.
• inputmode आणि autocomplete: योग्य कीबोर्ड दाखवून किंवा आधीच माहित असलेला डेटा भरून चुका कमी करते.
जर नेटिव्ह मेसेजेस खूप सामान्य (generic) वाटत असतील, तर Constraint Validation API वापरा.
प्रत्येक इनपुटमध्ये एक validity ऑब्जेक्ट असतो. उपयुक्त एरर मेसेजेस लिहिण्यासाठी तुम्ही valueMissing किंवा typeMismatch सारख्या प्रॉपर्टीज तपासू शकता. स्वतःचा मजकूर दाखवण्यासाठी setCustomValidity वापरा.
input इव्हेंटवर तुमचा कस्टम मेसेज क्लिअर करायला विसरू नका. तसे न केल्यास, युजरने चूक सुधारल्यानंतरही ते फील्ड एरर स्टेटमध्येच अडकून राहते.
स्टाईलिंगसाठी, एखादे फील्ड "touched" आहे की नाही हे ट्रॅक करण्यासाठी JavaScript वापरणे थांबवा.
आता CSS :user-invalid pseudo-class हे काम करते. युजरने फील्डसोबत इंटरॅक्ट केल्यानंतरच हे स्टाईल्स लागू करते. एरर टेक्स्ट आपोआप दाखवण्यासाठी याचा :has() सिलेक्टरसोबत वापर करा. यामुळे डझनांच्या संख्येने अनावश्यक कोड कमी होतो.
तुम्हाला खरोखर लायब्ररी कधी वापरावी?
फक्त दोन विशिष्ट प्रकरणांमध्येच लायब्ररीचा वापर करा:
१. Cross-field validation: जेव्हा एक फील्ड दुसऱ्यावर अवलंबून असते, जसे की "confirm password" किंवा जटिल कंडिशनल लॉजिक. २. Async validation: जेव्हा तुम्हाला डेटाबेस तपासण्याची गरज असते, जसे की "हा युजरनेम आधीच वापरला गेला आहे का?"
जर तुमच्या फॉर्मला फक्त सिंगल-फील्ड नियमांची गरज असेल, तर नेटिव्ह राहा. कमी कोड म्हणजे कमी बग्स. ब्राउझरपासून सुरुवात करा. जेव्हा ब्राउझरची मर्यादा संपते, तेव्हाच लायब्ररी जोडा.
ऐच्छिक लर्निंग कम्युनिटी: https://t.me/GyaanSetuAi