Error State — क्या है, फ़ील्ड त्रुटि प्रदर्शन और Android में कार्यान्वयन

Android में फ़ील्ड त्रुटि स्थिति क्या है?

Error State एक इनपुट फ़ील्ड का एक विशेष प्रदर्शन मोड है जो तब सक्रिय होता है जब दर्ज किया गया डेटा सत्यापन में विफल हो जाता है। दृश्य रूप से, Error State में तीन घटक शामिल होते हैं: फ़ील्ड के बॉर्डर या पृष्ठभूमि के रंग में परिवर्तन (आमतौर पर लाल), त्रुटि का वर्णन करने वाले फ़ील्ड के नीचे एक टेक्स्ट संदेश का दिखना, और वैकल्पिक रूप से एक आइकन या हाइलाइट। Error State का उद्देश्य उपयोगकर्ता का ध्यान तुरंत समस्या वाले फ़ील्ड की ओर आकर्षित करना और त्रुटि को ठीक करने का सुझाव देना है।

Android में, Error State को Material Design Components से TextInputLayout स्तर पर कार्यान्वित किया जाता है। TextInputLayout EditText को लपेटता है और इसकी स्थितियों का प्रबंधन करता है: normal, focused, error, disabled। setError(String) विधि फ़ील्ड को त्रुटि स्थिति में बदल देती है, बॉर्डर का रंग बदल देती है और संदेश प्रदर्शित करती है। जब टेक्स्ट बदलता है या setError(null) कॉल किया जाता है, तो फ़ील्ड normal पर वापस आ जाता है।

Material Design Guidelines के अनुसार, Error State ध्यान देने योग्य होना चाहिए लेकिन प्रभावी नहीं। लाल बॉर्डर का रंग सामान्य स्थिति से विपरीत होना चाहिए लेकिन इंटरफ़ेस को अधिभारित नहीं करना चाहिए। त्रुटि संदेश में समस्या और उसे हल करने के तरीके के बारे में विशिष्ट जानकारी होनी चाहिए। एक त्रुटि आइकन (उदाहरण के लिए, विस्मयादिबोधक चिह्न के साथ लाल वृत्त) दृश्य संकेत को मजबूत करता है।

TextInputLayout में setError कैसे काम करता है

setError(CharSequence errorText) विधि TextInputLayout को त्रुटि स्थिति में बदल देती है। errorText पैरामीटर फ़ील्ड के नीचे प्रदर्शित टेक्स्ट है। यदि null पास किया जाता है, तो त्रुटि साफ़ हो जाती है। TextInputLayout एनिमेशन का प्रबंधन करता है: त्रुटि टेक्स्ट एक सहज फ़ेड-इन के साथ प्रकट होता है, बॉर्डर लाल हो जाता है। एक त्रुटि आइकन (डिफ़ॉल्ट: एक वृत्त में विस्मयादिबोधक चिह्न) फ़ील्ड के अंत में दिखाया जाता है।

महत्वपूर्ण विवरण: त्रुटि संदेश के लिए स्थान आरक्षित करने के लिए setError से पहले setErrorEnabled(true) कॉल किया जाना चाहिए। अन्यथा, त्रुटि प्रकट होने पर लेआउट "उछल" सकता है क्योंकि स्थान आरक्षित नहीं है। लेआउट शिफ्ट से बचने के लिए XML में app:errorEnabled="true" के माध्यम से हमेशा त्रुटि समर्थन सक्षम करने की अनुशंसा की जाती है।

setError विधि स्वचालित रूप से साफ़ हो जाती है जब फ़ील्ड टेक्स्ट बदलता है यदि setErrorEnabled(true) सक्षम है। यह व्यवहार रीयल-टाइम सत्यापन के लिए सुविधाजनक है: जैसे ही उपयोगकर्ता त्रुटि को ठीक करना शुरू करता है, लाल बॉर्डर गायब हो जाता है और फ़ील्ड सामान्य स्थिति में वापस आ जाता है। हालांकि, जटिल परिदृश्यों के लिए यह ऑटो-क्लियर अवांछनीय हो सकता है — ऐसे मामलों में, त्रुटि को मैन्युअल रूप से प्रबंधित करें।

val til = findViewById<TextInputLayout>(R.id.til_email)

// त्रुटि समर्थन सक्षम करें (अन्यथा XML में सेट करें)
til.isErrorEnabled = true

// त्रुटि संदेश सेट करें
til.error = "Invalid email address"

// त्रुटि साफ़ करें
til.error = null

// जाँचें कि त्रुटि मौजूद है या नहीं
if (til.error != null) {
    // फ़ील्ड त्रुटि स्थिति में है
}

उदाहरण setError/isErrorEnabled तक पहुँचने के लिए Kotlin गुणों का उपयोग करता है। TextInputLayout स्वचालित रूप से UI को अपडेट करता है: boxStrokeColor बदलता है, त्रुटि आइकन दिखाता है, त्रुटि टेक्स्ट प्रदर्शित करता है। यदि EditText में टेक्स्ट बदलता है, तो त्रुटि स्वचालित रूप से साफ़ हो जाती है। मैन्युअल रीसेट के लिए, error = null सेट करें।

त्रुटियाँ प्रदर्शित करने के वैकल्पिक तरीके

सभी प्रोजेक्ट Material Design Components का उपयोग नहीं करते हैं। कस्टम त्रुटि प्रदर्शन के लिए, आप EditText के नीचे एक अलग TextView का उपयोग कर सकते हैं जो त्रुटि पर दृश्यमान हो जाता है। यह दृष्टिकोण शैलियों और संदेश स्थान पर पूर्ण नियंत्रण देता है। उदाहरण के लिए, आप संदेश को फ़ील्ड के दाईं ओर रख सकते हैं, एक अलग पृष्ठभूमि रंग का उपयोग कर सकते हैं, या टेक्स्ट के बाईं ओर एक आइकन जोड़ सकते हैं।

Jetpack Compose में, Error State को OutlinedTextField या TextField में isError पैरामीटर के माध्यम से कार्यान्वित किया जाता है। जब isError = true होता है, तो बॉर्डर लाल हो जाता है, और आप supportingText के माध्यम से त्रुटि टेक्स्ट दिखा सकते हैं। Compose में टेक्स्ट बदलने पर अंतर्निहित ऑटो-क्लियर नहीं है — डेवलपर remember और mutableStateOf का उपयोग करके मैन्युअल रूप से त्रुटि स्थिति का प्रबंधन करता है।

समूह त्रुटियों के लिए (एकाधिक फ़ील्ड के लिए एकल संदेश, उदाहरण के लिए, "सभी अनिवार्य फ़ील्ड भरें"), फ़ॉर्म के शीर्ष पर Snackbar, Dialog या इनलाइन ब्लॉक का उपयोग करें। समूह त्रुटि व्यक्तिगत फ़ील्ड के Error State को प्रतिस्थापित नहीं करती बल्कि उसे पूरक करती है। उपयोगकर्ता पहले सामान्य संदेश देखता है, फिर त्रुटियों वाले विशिष्ट फ़ील्ड खोजता है।

त्रुटियों के रंग, आइकन और एनिमेशन

Material Design Components में Error State का रंग boxStrokeErrorColor विशेषता या थीम में colorError विशेषता के माध्यम से नियंत्रित किया जाता है। डिफ़ॉल्ट रूप से, सिस्टम लाल रंग का उपयोग किया जाता है, लेकिन इसे ऐप थीम में या सीधे TextInputLayout में app:boxStrokeErrorColor="@color/customErrorColor" के माध्यम से ओवरराइड किया जा सकता है। डार्क थीम समर्थन के लिए, लाइट और डार्क मोड के लिए अलग-अलग रंगों वाले सेलेक्टर का उपयोग करने की अनुशंसा की जाती है।

त्रुटि आइकन app:errorIconDrawable के माध्यम से कॉन्फ़िगर किया जाता है। डिफ़ॉल्ट रूप से, एक वृत्त में विस्मयादिबोधक चिह्न प्रदर्शित होता है। इसे कस्टम आइकन से बदला जा सकता है या app:errorIconDrawable="@null" सेट करके पूरी तरह हटाया जा सकता है। आइकन TextInputLayout के अंत में प्रदर्शित होता है और एक अतिरिक्त दृश्य मार्कर के रूप में कार्य करता है। Material Design 3 में, पहुँच के लिए त्रुटि आइकन अनिवार्य है।

त्रुटि प्रकट होने का एनिमेशन TextInputLayout में निर्मित है: टेक्स्ट एक सहज अपारदर्शिता परिवर्तन के साथ नीचे से ऊपर की ओर स्लाइड करता है। कस्टम एनिमेशन के लिए, Transition API या MotionLayout का उपयोग करें। उदाहरण के लिए, त्रुटि पर फ़ील्ड को हिलाना अतिरिक्त ध्यान आकर्षित करता है। हालांकि, एनिमेशन का अत्यधिक उपयोग UX को ख़राब करता है — संदेश का सहज प्रकट होना पर्याप्त है।

सत्यापन के दौरान त्रुटि स्थिति प्रबंधन

Error State प्रबंधन दो चरणों में विभाजित है: फ़ील्ड सत्यापन के दौरान त्रुटि सेट करना और सुधार पर त्रुटि साफ़ करना। सरलतम मामले में, सत्यापन TextWatcher.afterTextChanged में कॉल किया जाता है: यदि मान अमान्य है, तो त्रुटि संदेश के साथ setError कॉल किया जाता है। यदि मान्य है, तो setError(null) कॉल किया जाता है। जब setError(null) स्थिति साफ़ करता है तो TextInputLayout स्वचालित रूप से त्रुटि छिपा देता है।

फ़ॉर्म सत्यापन के लिए, त्रुटियाँ फ़ॉर्म सबमिट करने के चरण में सेट की जाती हैं। सभी फ़ील्ड के माध्यम से लूप करें, प्रत्येक को मान्य करें, अमान्य फ़ील्ड के लिए त्रुटियाँ सेट करें, और पहले त्रुटि वाले फ़ील्ड पर फ़ोकस करें। इस प्रक्रिया के दौरान सबमिट बटन अवरुद्ध हो जाता है। यदि फ़ॉर्म बड़ा है, तो पहले त्रुटि वाले फ़ील्ड पर स्क्रॉल करने और स्वचालित रूप से उस पर फ़ोकस सेट करने की अनुशंसा की जाती है।

एकल त्रुटि फ़ोकस नियम: फ़ॉर्म सबमिट करते समय, केवल पहले त्रुटि वाले फ़ील्ड पर फ़ोकस सेट करें। उपयोगकर्ता एक बार में एक त्रुटि ठीक करता है, और सुधार के बाद, अगला त्रुटि वाला फ़ील्ड स्वचालित रूप से फ़ोकस प्राप्त करता है। यह चरण-दर-चरण दृष्टिकोण संज्ञानात्मक भार को कम करता है। Material TextInputLayout त्रुटि सेट करते समय फ़ोकस को इंटरसेप्ट नहीं करता — यह requestFocus() के माध्यम से मैन्युअल रूप से किया जाना चाहिए।

Error State के साथ काम करते समय सामान्य गलतियाँ

पहली गलती — isErrorEnabled का अभाव। यदि setError से पहले setErrorEnabled कॉल नहीं किया जाता है, तो त्रुटि संदेश प्रकट होने पर लेआउट शिफ्ट हो सकता है। यह विशेष रूप से महत्वपूर्ण है यदि फ़ील्ड स्क्रीन के बीच में है — उपयोगकर्ता अपनी स्क्रॉल स्थिति खो देता है। त्रुटि सेट करने से पहले XML में app:errorEnabled="true" के माध्यम से या प्रोग्रामेटिक रूप से हमेशा setErrorEnabled(true) सक्षम करें।

दूसरी गलती — अत्यधिक लंबा त्रुटि संदेश। लंबा टेक्स्ट कई पंक्तियों में विभाजित हो जाता है और पड़ोसी फ़ील्ड को ओवरलैप कर सकता है। अनुशंसित त्रुटि संदेश लंबाई 20-40 वर्ण है। यदि अधिक जानकारी की आवश्यकता है, तो सामान्य स्थिति में helperText या अतिरिक्त स्पष्टीकरण के लिए टूलटिप का उपयोग करें। संक्षिप्तता एक अच्छे Error State की नींव है।

तीसरी गलती — पहुँच की अनदेखी। Error State स्क्रीन रीडर के लिए सुलभ होना चाहिए। TextInputLayout स्वचालित रूप से contentDescription के माध्यम से त्रुटि की घोषणा करता है, लेकिन कस्टम कार्यान्वयन को इसे मैन्युअल रूप से करना चाहिए। त्रुटि संदेशों के लिए announceForAccessibility() या android:importantForAccessibility का उपयोग करें। TalkBack उपयोगकर्ताओं को त्रुटि प्रकट होने के तुरंत बाद सुननी चाहिए।