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

किसी भी यूज़र इंटरफ़ेस में, उपयोगकर्ता का इनपुट सबसे संवेदनशील जानकारी होती है. किसी ऐप्लिकेशन को इस्तेमाल करने के लिए ज़रूरी है कि वह उपयोगकर्ताओं को उनके इनपुट में हुई किसी भी गलती को देखने, समझने, और उसे ठीक करने में मदद करे. :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>

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

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

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

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

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

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