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

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

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

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

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

:user-valid और :user-invalid pseudo-classes का इस्तेमाल करें

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

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>

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

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

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

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

• :user-valid - MDN वेब दस्तावेज़
• :user-invalid - MDN वेब दस्तावेज़
• उपयोगकर्ता इंटरैक्शन के लिए सूडो-क्लास - W3C एडिटर का ड्राफ़्ट
• फ़ॉर्म कंस्ट्रेंट की पुष्टि करना - एमडीएन वेब दस्तावेज़
• Forms Accessibility ट्यूटोरियल - Web Accessibility Initiative

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