حالة الخطأ — ما هي، عرض أخطاء الحقل والتطبيق في Android

ما هي حالة خطأ الحقل في Android؟

Error State هي وضع عرض خاص لحقل الإدخال يتم تنشيطه عندما تفشل البيانات المدخلة في التحقق. بصريًا، تتضمن Error State ثلاثة مكونات: تغيير في لون الحدود أو خلفية الحقل (عادةً إلى الأحمر)، ظهور رسالة نصية أسفل الحقل تصف الخطأ، واختياريًا أيقونة أو تمييز. الغرض من Error State هو جذب انتباه المستخدم فورًا إلى الحقل الذي به مشكلة واقتراح كيفية إصلاح الخطأ.

في Android، يتم تطبيق Error State على مستوى TextInputLayout من Material Design Components. يغلف TextInputLayoutEditText ويدير حالاته: normal، focused، error، disabled. الطريقة setError(String) تحول الحقل إلى حالة الخطأ، وتغير لون الحدود وتعرض الرسالة. عند تغيير النص أو استدعاء setError(null)، يعود الحقل إلى normal.

وفقًا Material Design Guidelines، يجب أن يكون Error State ملحوظًا ولكن غير مسيطر. يجب أن يتباين اللون الأحمر للحدود مع الحالة العادية ولكن دون إثقال الواجهة. يجب أن تحتوي رسالة الخطأ على معلومات محددة حول المشكلة وكيفية حلها. أيقونة الخطأ (على سبيل المثال، دائرة حمراء بعلامة تعجب) تعزز الإشارة البصرية.

كيف يعمل setError في TextInputLayout

الطريقة setError(CharSequence errorText) تحول TextInputLayout إلى حالة الخطأ. المعامل errorText هو النص المعروض أسفل الحقل. إذا تم تمرير null، يتم مسح الخطأ. يدير TextInputLayout الرسم المتحرك: يظهر نص الخطأ مع تلاشي سلس، وتتغير الحدود إلى الأحمر. تظهر أيقونة الخطأ (افتراضيًا: علامة تعجب في دائرة) في نهاية الحقل.

تفاصيل مهمة: setErrorEnabled(true) يجب استدعاؤه قبل setError لحجز مساحة لرسالة الخطأ. وإلا، فقد "يقفز" التخطيط عند ظهور الخطأ لأن المساحة غير محجوزة. يُوصى دائمًا بتمكين دعم الخطأ في 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) {
    // الحقل في حالة خطأ
}

يستخدم المثال خصائص Kotlin للوصول إلى setError/isErrorEnabled. TextInputLayout يحدّث واجهة المستخدم تلقائيًا: يغير boxStrokeColor، ويعرض أيقونة الخطأ، ويعرض نص الخطأ. إذا تغير النص في EditText، يتم مسح الخطأ تلقائيًا. لإعادة التعيين يدويًا، قم بتعيين error = null.

طرق بديلة لعرض الأخطاء

لا تستخدم جميع المشاريع Material Design Components. لـ عرض خطأ مخصص، يمكنك استخدام TextView منفصل أسفل EditText يصبح مرئيًا عند حدوث خطأ. يمنحك هذا النهج تحكمًا كاملاً في الأنماط وموضع الرسالة. على سبيل المثال، يمكنك وضع الرسالة على يمين الحقل، أو استخدام لون خلفية مختلف، أو إضافة أيقونة إلى يسار النص.

في Jetpack Compose، يتم تطبيق Error State عبر المعامل isError في OutlinedTextField أو TextField. عندما يكون isError = true، يتحول الحد إلى الأحمر، ويمكنك عرض نص الخطأ عبر supportingText. لا يحتوي Compose على مسح تلقائي مدمج عند تغيير النص — يدير المطور حالة الخطأ يدويًا باستخدام remember و mutableStateOf.

لـ أخطاء المجموعة (رسالة واحدة لحقول متعددة، على سبيل المثال، "املأ جميع الحقول الإلزامية")، استخدم Snackbar أو Dialog أو كتلة مضمنة في أعلى النموذج. خطأ المجموعة لا يحل محل Error State للحقول الفردية بل يكمله. يرى المستخدم أولاً الرسالة العامة، ثم يبحث عن الحقول المحددة التي بها أخطاء.

الألوان والأيقونات والرسوم المتحركة للأخطاء

يتم التحكم في لون Error State في Material Design Components عبر السمة boxStrokeErrorColor أو سمة colorError في السمة. افتراضيًا، يتم استخدام اللون الأحمر للنظام، ولكن يمكن تجاوزه في سمة التطبيق أو مباشرة في TextInputLayout عبر app:boxStrokeErrorColor="@color/customErrorColor". لدعم السمة الداكنة، يُوصى باستخدام محدد بألوان مختلفة للوضع الفاتح والداكن.

أيقونة الخطأ يتم تكوينها عبر app:errorIconDrawable. افتراضيًا، يتم عرض علامة تعجب في دائرة. يمكن استبدالها بأيقونة مخصصة أو إزالتها بالكامل عن طريق تعيين app:errorIconDrawable="@null". تظهر الأيقونة في نهاية TextInputLayout وتعمل كعلامة بصرية إضافية. في Material Design 3، أيقونة الخطأ إلزامية لإمكانية الوصول.

الرسم المتحرك لظهور الخطأ مدمج في TextInputLayout: ينزلق النص من الأسفل مع تغيير سلس في الشفافية. للرسوم المتحركة المخصصة، استخدم Transition API أو MotionLayout. على سبيل المثال، هز الحقل عند الخطأ يجذب انتباهًا إضافيًا. ومع ذلك، فإن الإفراط في استخدام الرسوم المتحركة يضعف تجربة المستخدم — الظهور السلس للرسالة كافٍ.

إدارة حالة الخطأ أثناء التحقق

تنقسم إدارة Error State إلى مرحلتين: تعيين الخطأ أثناء التحقق من الحقل ومسح الخطأ عند التصحيح. في أبسط الحالات، يتم استدعاء التحقق في TextWatcher.afterTextChanged: إذا كانت القيمة غير صالحة، يتم استدعاء setError مع رسالة خطأ. إذا كانت صالحة، يتم استدعاء setError(null). يخفي TextInputLayout الخطأ تلقائيًا عندما يمسح setError(null) الحالة.

لـ التحقق من النموذج، يتم تعيين الأخطاء في مرحلة إرسال النموذج. قم بالمرور على جميع الحقول، وتحقق من كل منها، وعيّن الأخطاء للحقول غير الصالحة، وركز على أول حقل به خطأ. يتم حظر زر الإرسال خلال هذه العملية. إذا كان النموذج كبيرًا، يُوصى بالتمرير إلى أول حقل به خطأ وتعيين التركيز عليه تلقائيًا.

قاعدة التركيز على خطأ واحد: عند إرسال نموذج، قم بتعيين التركيز فقط على أول حقل به خطأ. يقوم المستخدم بإصلاح خطأ واحد في كل مرة، وبعد التصحيح، يتلقى الحقل التالي الذي به خطأ التركيز تلقائيًا. هذا النهج التدريجي يقلل العبء المعرفي. لا يعترض Material TextInputLayout التركيز عند تعيين خطأ — يجب القيام بذلك يدويًا عبر requestFocus().

الأخطاء الشائعة عند العمل مع Error State

الخطأ الأول — عدم وجود isErrorEnabled. إذا لم يتم استدعاء setErrorEnabled قبل setError، فقد يتحرك التخطيط عند ظهور رسالة الخطأ. هذا أمر بالغ الأهمية بشكل خاص إذا كان الحقل في منتصف الشاشة — يفقد المستخدم موضع التمرير. قم دائمًا بتمكين setErrorEnabled(true) في XML عبر app:errorEnabled="true" أو برمجيًا قبل تعيين خطأ.

الخطأ الثاني — رسالة خطأ طويلة جدًا. النص الطويل يلتف على عدة أسطر وقد يتداخل مع الحقول المجاورة. الطول الموصى به لرسالة الخطأ هو 20-40 حرفًا. إذا كانت هناك حاجة لمزيد من المعلومات، استخدم helperText في الحالة العادية أو تلميح أداة لشرح إضافي. الإيجاز هو أساس Error State الجيد.

الخطأ الثالث — تجاهل إمكانية الوصول. يجب أن يكون Error State متاحًا لقارئات الشاشة. يعلن TextInputLayout تلقائيًا عن الخطأ عبر contentDescription، لكن التطبيقات المخصصة يجب أن تفعل ذلك يدويًا. استخدم announceForAccessibility() أو android:importantForAccessibility لرسائل الخطأ. يجب أن يسمع مستخدمو TalkBack الخطأ فور ظهوره.