फ़ॉर्म में सही डेटा डालने में उपयोगकर्ताओं की मदद करना

ब्राउज़र में पुष्टि करने के लिए पहले से ही कई सुविधाएं मौजूद होती हैं. इनकी मदद से, यह पता लगाया जाता है कि उपयोगकर्ताओं ने सही फ़ॉर्मैट में डेटा डाला है या नहीं. सही एलिमेंट और एट्रिब्यूट का इस्तेमाल करके, इन सुविधाओं को चालू किया जा सकता है. इसके अलावा, सीएसएस और JavaScript की मदद से फ़ॉर्म की पुष्टि को बेहतर बनाया जा सकता है.

आपको अपने फ़ॉर्म की पुष्टि क्यों करनी चाहिए?

आपने पिछले मॉड्यूल में सीखा है कि बार-बार उपयोगकर्ताओं की मदद करने के लिए, फ़ॉर्म में जानकारी फिर से डालें. मान्य डेटा डालने में उपयोगकर्ताओं की मदद कैसे की जा सकती है?

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

इसमें उपयोगकर्ताओं की मदद करने के लिए, पुष्टि करने के नियम बनाएं और उनके बारे में बताएं.

गलती से ज़रूरी फ़ील्ड न मिटे, इसके लिए उपयोगकर्ताओं की मदद करें

अपने फ़ॉर्म में डाले गए डेटा के लिए, सही फ़ॉर्मैट और शर्तें तय करने के लिए, एचटीएमएल का इस्तेमाल किया जा सकता है. आपको यह भी बताना होगा कि कौनसे फ़ील्ड ज़रूरी हैं.

बिना कोई डेटा डाले, यह फ़ॉर्म सबमिट करें. क्या आपको <input> के साथ गड़बड़ी का कोई ऐसा मैसेज दिख रहा है जो बता रहा है कि यह फ़ील्ड ज़रूरी है?

ऐसा required एट्रिब्यूट की वजह से होता है.

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

आपने पहले ही सीखा है कि और भी कई टाइप इस्तेमाल किए जा सकते हैं, जैसे कि type="email". चलिए, ज़रूरी ईमेल <input> पर नज़र डालते हैं.

बिना कोई डेटा डाले, यह फ़ॉर्म सबमिट करें. क्या पिछले डेमो में कोई अंतर आया है? अब ईमेल फ़ील्ड में अपना नाम डालें और सबमिट करने की कोशिश करें. आपको गड़बड़ी का कोई दूसरा मैसेज दिखता है. यह कैसे मुमकिन है? आपको अलग मैसेज मिला है, क्योंकि आपने जो वैल्यू डाली है वह सही ईमेल पता नहीं है.

required एट्रिब्यूट से ब्राउज़र को पता चलता है कि यह फ़ील्ड ज़रूरी है. ब्राउज़र यह भी जांच करता है कि डाला गया डेटा, type फ़ॉर्मैट से मेल खाता है या नहीं. उदाहरण में दिखाया गया ईमेल फ़ील्ड सिर्फ़ तब मान्य होगा, जब वह खाली न हो और डाला गया डेटा एक मान्य ईमेल पता हो.

सही फ़ॉर्मैट डालने में उपयोगकर्ता की मदद करें

आपने सीख लिया है कि फ़ील्ड को कैसे ज़रूरी बनाया जाता है. आप ब्राउज़र को यह कैसे निर्देश देंगे कि उपयोगकर्ता को किसी फ़ॉर्म फ़ील्ड के लिए कम से कम आठ वर्ण डालने ज़रूरी हैं?

डेमो आज़माएं. बदलाव करने के बाद, अगर आठ से कम वर्ण डाले जाते हैं, तो फ़ॉर्म सबमिट नहीं हो पाएगा.

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">

पुष्टि करने के अपने नियमों के बारे में बताएं

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

पक्का करें कि सभी उपयोगकर्ताओं को पुष्टि करने के आपके नियमों के बारे में पता हो. इसके लिए, फ़ॉर्म कंट्रोल को नियमों के बारे में जानकारी देने वाले एलिमेंट से कनेक्ट करें. ऐसा करने के लिए, फ़ॉर्म के id वाले एलिमेंट में aria-describedby एट्रिब्यूट जोड़ें.

पैटर्न एट्रिब्यूट

कभी-कभी आप पुष्टि करने के ज़्यादा बेहतर नियम तय करना चाहते हैं. फिर से, आपके पास एचटीएमएल एट्रिब्यूट का इस्तेमाल करने का विकल्प होता है. इसे pattern कहा जाता है और वैल्यू के तौर पर रेगुलर एक्सप्रेशन.

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

यहां, केवल अंग्रेज़ी के छोटे अक्षरों की अनुमति है; उपयोगकर्ता को कम से कम दो वर्ण और बीस से ज़्यादा वर्ण नहीं डालने होंगे.

अंग्रेज़ी के बड़े अक्षरों की अनुमति देने के लिए, आपको pattern में किस तरह का बदलाव करना होगा? इसे आज़माएं.

स्टाइल जोड़ें

अब आप एचटीएमएल में पुष्टि करने का तरीका जान गए हैं. यह बढ़िया नहीं होगा कि आप सत्यापन स्थिति के आधार पर फ़ॉर्म नियंत्रण को शैली भी दे सकें? सीएसएस का इस्तेमाल करके ऐसा किया जा सकता है.

किसी ज़रूरी फ़ॉर्म फ़ील्ड को स्टाइल करने का तरीका

उपयोगकर्ता को दिखाएं कि आपके फ़ॉर्म से इंटरैक्ट करने से पहले, फ़ील्ड में कोई वैल्यू डालना ज़रूरी है.

:required सीएसएस pseudo class की मदद से, required फ़ील्ड को स्टाइल किया जा सकता है.

input:required {
  border: 2px solid;
}

फ़ॉर्म के गलत कंट्रोल की शैली

क्या आपको याद है कि अगर उपयोगकर्ता का डाला गया डेटा अमान्य हो, तो क्या होता है? फ़ॉर्म नियंत्रण से अटैच किया गया गड़बड़ी का मैसेज दिखाई देता है. क्या ऐसा होने पर, एलिमेंट का लुक बदलना बेहतर नहीं होगा?

आप :invalid स्यूडो-क्लास का इस्तेमाल कर सकते हैं का इस्तेमाल करें. इसके अलावा, मान्य फ़ॉर्म एलिमेंट को स्टाइल करने के लिए, :valid स्यूडो-क्लास भी है.

पुष्टि करने की प्रोसेस के आधार पर, स्टाइल को बदलने के कई तरीके हैं. सीएसएस के मॉड्यूल में, आपको स्टाइलिंग फ़ॉर्म के बारे में ज़्यादा जानकारी मिलेगी.

JavaScript की मदद से पुष्टि करना

अपने फ़ॉर्म की पुष्टि को और बेहतर बनाने के लिए, इनका इस्तेमाल किया जा सकता है: JavaScript कंस्ट्रेंट पुष्टि एपीआई.

सही गड़बड़ी के मैसेज उपलब्ध कराएं

आपने पहले सीखा था कि हर ब्राउज़र में गड़बड़ी के मैसेज एक जैसे नहीं होते. एक ही मैसेज सभी लोगों को कैसे दिखाया जा सकता है?

यह लक्ष्य हासिल करने के लिए, setCustomValidity() Constraint Validation API का इस्तेमाल करने का तरीका. चलिए देखते हैं कि यह कैसे काम करता है.

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

उस एलिमेंट के लिए क्वेरी करें जहां आपको कस्टम गड़बड़ी का मैसेज सेट करना है. अपने तय किए गए एलिमेंट के invalid इवेंट को सुनें. वहां आपने setCustomValidity() के साथ मैसेज सेट कर दिया. अगर इनपुट अमान्य है, तो यह उदाहरण Please enter your name. मैसेज दिखाता है.

अलग-अलग ब्राउज़र में डेमो खोलें. आपको हर जगह एक जैसा मैसेज दिखेगा. अब JavaScript को हटाने की कोशिश करें और फिर से कोशिश करें. आपको गड़बड़ी के डिफ़ॉल्ट मैसेज फिर से दिखने लगेंगे.

Constraint Validation API की मदद से बहुत कुछ किया जा सकता है. आपको इनके इस्तेमाल के बारे में विस्तार से बताया गया है: JavaScript के साथ पुष्टि की जा सकती है.

रीयल-टाइम में पुष्टि करने का तरीका JavaScript में रीयल-टाइम पुष्टि जोड़ने के लिए, फ़ॉर्म कंट्रोल के onblur इवेंट को सुनें, और उपयोगकर्ता के फ़ॉर्म फ़ील्ड को छोड़ने पर, इनपुट की तुरंत पुष्टि की जा सकती है.

डेमो में फ़ॉर्म फ़ील्ड पर क्लिक करें. "वेब" डालें और पेज पर कहीं और क्लिक करें. आपको फ़ॉर्म फ़ील्ड के नीचे minlength के लिए नेटिव गड़बड़ी का मैसेज दिखता है.

लागू करने के बारे में ज़्यादा जानें आने वाले मॉड्यूल में, JavaScript के साथ रीयल-टाइम पुष्टि की सुविधा.

देखें कि आपको कितना समझ आया है

फ़ॉर्म की पुष्टि करने के बारे में अपनी जानकारी परखें

संसाधन

• फ़ॉर्म सबमिट करने के बाद, पेमेंट बटन को बंद करना
• फ़ॉर्म को बेहतर बनाने के लिए सीएसएस जोड़ना