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

उपयोगकर्ताओं ने सही फ़ॉर्मैट में डेटा डाला है या नहीं, इसकी पुष्टि करने के लिए, ब्राउज़र में पहले से ही सुविधाएं मौजूद होती हैं. सही एलिमेंट और एट्रिब्यूट का इस्तेमाल करके, इन सुविधाओं को चालू किया जा सकता है. साथ ही, सीएसएस और 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">

एट्रिब्यूट का नाम minlength है. वैल्यू को 8 पर सेट करें और आपके पास मनमुताबिक पुष्टि करने का नियम है. अगर आपको कॉपीराइट की सेटिंग बदलनी है, तो maxlength का इस्तेमाल करें.

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

<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 को किस तरह बदलना है? इसे आज़माएं.

जवाब को टॉगल करें

सही जवाब pattern="[a-zA-Z]{2,20}" है.

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

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

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

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

required फ़ील्ड को :required सीएसएस स्यूडो क्लास के साथ स्टाइल किया जा सकता है.

input:required {
  border: 2px solid;
}

अमान्य फ़ॉर्म कंट्रोल की स्टाइल

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

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

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

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

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

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

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

इसके लिए, कंस्ट्रेंट की पुष्टि करने वाले एपीआई के setCustomValidity() तरीके का इस्तेमाल करें. आइए, देखते हैं कि यह कैसे काम करता है.

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

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

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

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

Constraint Verification API की मदद से आप कई काम कर सकते हैं. बाद के मॉड्यूल में, JavaScript की मदद से पुष्टि करने के बारे में ज़्यादा जानकारी मिलेगी.

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

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

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

आपने जो सीखा है उसकी जांच करें

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

फ़ॉर्म के कंट्रोल को ज़रूरी बनाने के लिए, किस एट्रिब्यूट का इस्तेमाल किया जाता है?

required
🎉
needed
फिर से कोशिश करें!
essential
फिर से कोशिश करें!
obligatory
फिर से कोशिश करें!

क्या खुद से गड़बड़ी के मैसेज बताए जा सकते हैं?

हां, message एचटीएमएल एट्रिब्यूट के साथ.
फिर से कोशिश करें!
नहीं
शायद, फिर से कोशिश करें!
हां, :invalid सीएसएस स्यूडो एलिमेंट के साथ.
फिर से कोशिश करें!
हां, Constraint Verification API के साथ.
🎉

type="email" और required एट्रिब्यूट वाला <input> सबमिट किया जा सकता है:

अगर वह खाली नहीं है.
फिर से कोशिश करें!
अगर इसका मान एक मान्य ईमेल पता है.
🎉
हर मामले में.
फिर से कोशिश करें!
अगर इसके मान में ईमेल शब्द शामिल है.
फिर से कोशिश करें!

संसाधन