:user-मान्य और :user-अमान्य सूडो-क्लास

पब्लिश किया गया: 8 नवंबर, 2023

किसी भी यूज़र इंटरफ़ेस में, उपयोगकर्ता का इनपुट सबसे संवेदनशील जानकारी होती है. किसी ऐप्लिकेशन को इस्तेमाल करने के लिए, यह ज़रूरी है कि वह उपयोगकर्ताओं को उनके इनपुट में हुई किसी भी गलती को देखने, समझने, और उसे ठीक करने में मदद करे. :user-valid और :user-invalid स्यूडो-क्लास सिलेक्टर, इनपुट की पुष्टि करने के उपयोगकर्ता अनुभव को बेहतर बनाने में मदद करते हैं. ऐसा, उपयोगकर्ता के इनपुट में बदलाव करने के बाद ही, गड़बड़ियों के बारे में सुझाव देकर किया जाता है. इन नए सिलेक्टर की मदद से, उपयोगकर्ता के बदले गए इनपुट को ट्रैक करने के लिए, अब स्टेटफ़ुल कोड लिखने की ज़रूरत नहीं है.

उपयोगकर्ता इंटरैक्शन के स्यूडो-क्लास सिलेक्टर

:user-valid और :user-invalid स्यूडो-क्लास सिलेक्टर, मौजूदा :valid और :invalid स्यूडो-क्लास से मिलते-जुलते हैं. दोनों, फ़ॉर्म कंट्रोल से इस आधार पर मैच करते हैं कि उसकी मौजूदा वैल्यू, पुष्टि से जुड़ी शर्तों को पूरा करती है या नहीं. हालांकि, :user-valid और :user-invalid की नई स्यूडो-क्लास का फ़ायदा यह है कि ये किसी फ़ॉर्म कंट्रोल से सिर्फ़ तब मैच करती हैं, जब उपयोगकर्ता ने इनपुट के साथ ज़्यादा इंटरैक्ट किया हो.

ज़रूरी और खाली फ़ॉर्म कंट्रोल, :invalid से मैच करेगा. भले ही, उपयोगकर्ता ने पेज के साथ इंटरैक्ट करना शुरू न किया हो. हालांकि, वह फ़ॉर्म कंट्रोल तब तक :user-invalid से मैच नहीं करेगा, जब तक उपयोगकर्ता इनपुट को बदलकर उसे अमान्य स्थिति में नहीं छोड़ देता.

:user-valid और :user-invalid स्यूडो-क्लास का इस्तेमाल करना

इन उदाहरणों में दिखाए गए तरीके से, इनपुट, चुनें, और टेक्स्टएरिया कंट्रोल को स्टाइल करने के लिए, इन स्यूडो-क्लास का इस्तेमाल करें:

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}

<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

तुलना करने के लिए, तीन स्क्रीनशॉट को एक साथ दिखाने वाली इमेज. हर स्क्रीनशॉट में एक ही तरह के इनपुट, चुनने के लिए बटन, और टेक्स्टएरिया कंट्रोल वाला वेब फ़ॉर्म दिखाया गया है. पहले स्क्रीनशॉट में, उपयोगकर्ता के किसी भी इनपुट से पहले फ़ॉर्म की शुरुआती स्थिति दिखाई गई है. कंट्रोल की सीमाएं स्लेटी रंग की होती हैं. साथ ही, नीचे दिए गए सहायता टेक्स्ट से पता चलता है कि फ़िलहाल हर कंट्रोल, :invalid स्यूडो-क्लास सिलेक्टर से मैच करेगा. दूसरे स्क्रीनशॉट में, उपयोगकर्ता के हर कंट्रोल के लिए इनपुट देने के बाद, वही फ़ॉर्म दिखाया गया है. कंट्रोल की बॉर्डर हरे रंग की होती हैं. साथ ही, नीचे दिए गए सहायता टेक्स्ट से पता चलता है कि फ़िलहाल हर कंट्रोल, :valid और :user-valid स्यूडो-क्लास सिलेक्टर, दोनों से मैच करेगा. तीसरे और आखिरी स्क्रीनशॉट में, उपयोगकर्ता के सभी इनपुट हटाने के बाद, वही फ़ॉर्म दिखता है. कंट्रोल की सीमाएं लाल रंग की होती हैं. साथ ही, नीचे दिए गए सहायता टेक्स्ट से पता चलता है कि फ़िलहाल हर कंट्रोल, :invalid और :user-invalid स्यूडो-क्लास सिलेक्टर, दोनों से मैच करेगा.

चुनने वाले टूल, उपयोगकर्ता इंटरैक्शन और पुष्टि से जुड़ी पाबंदियों के आधार पर मैच करते हैं. इन सुविधाओं को काम करते हुए देखने के लिए, नीचे दिए गए डेमो से इंटरैक्ट करें:

कम कोड के साथ बेहतर उपयोगकर्ता अनुभव

इन स्यूडो-क्लास के बिना, :user-valid और :user-invalid की मदद से बेहतर उपयोगकर्ता अनुभव पाने के लिए, आपको अतिरिक्त स्टेटफ़ुल कोड लिखना होगा. इस कोड की ज़रूरत, शुरुआती वैल्यू, इनपुट की मौजूदा फ़ोकस स्थिति, वैल्यू में उपयोगकर्ता के बदलावों की सीमा, और मान्य होने की अतिरिक्त जांच करने के लिए होती है. साथ ही, आखिर में स्टाइल के लिए चुनने के लिए एक क्लास जोड़ना भी ज़रूरी होता है. अब ब्राउज़र पर भरोसा करके, यह सब अपने-आप मैनेज होने दें.

ज़्यादा रिसॉर्स

Unsplash पर, Behzad Ghaffarian की दी गई कवर फ़ोटो.