الفئات الزائفة من نوع :user-valid و :user-invalid

تاريخ النشر: 8 تشرين الثاني (نوفمبر) 2023

إنّ إدخالات المستخدم هي من أكثر الأمور الحسّاسة في أي واجهة مستخدم. يجب أن يساعد التطبيق القابل للاستخدام المستخدمين في الاطّلاع على أي أخطاء في الإدخال وفهمها وتصحيحها. تساعد أدوات اختيار الفئات الزائفة :user-valid و:user-invalid في تحسين تجربة المستخدم في عملية التحقّق من صحة الإدخال من خلال تقديم ملاحظات عن الأخطاء فقط بعد أن يغيّر المستخدم الإدخال. باستخدام هذه المحدّدات الجديدة، لم يعد هناك حاجة إلى كتابة رمز برمجي يعتمد على الحالة لتتبُّع الإدخال الذي غيّره المستخدم.

أدوات اختيار الفئات الزائفة المستندة إلى تفاعل المستخدِم

إنّ عنصرَي اختيار الفئة الزائفة :user-valid و:user-invalid يشبهان فئتَي :valid و:invalid الزائفتَين الحاليتَين. يتطابق كلاهما مع عنصر تحكّم في النموذج استنادًا إلى ما إذا كانت قيمته الحالية تستوفي قيود التحقّق من الصحة. ومع ذلك، فإنّ ميزة الفئتَين الزائفتَين :user-valid و:user-invalid الجديدتَين هي أنّهما لا تتطابقان مع عنصر تحكّم في النموذج إلا بعد تفاعل المستخدِم بشكل كبير مع مدخل البيانات.

سيتطابق عنصر التحكّم في النموذج الذي يكون مطلوبًا وفارغًا مع :invalid حتى إذا لم يكن أحد المستخدِمين قد بدأ التفاعل مع الصفحة. ومع ذلك، لن تتم مطابقة :user-invalid مع عنصر التحكّم في النموذج نفسه إلى أن يغيّر المستخدم الإدخال ويتركه في حالة غير صالحة.

استخدام الفئتَين الزائفتَين :user-valid و:user-invalid

استخدِم هذه الفئات الزائفة لتنسيق عناصر التحكّم input وselect وtextarea، كما هو موضّح في الأمثلة التالية:

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>

صورة تجمع 3 لقطات شاشة جنبًا إلى جنب للمقارنة تعرض كل لقطة شاشة نموذج ويب يتضمّن عناصر التحكّم input وselect وtextarea نفسها. تعرض لقطة الشاشة الأولى النموذج في حالته الأولية قبل أي إدخال من المستخدِم. تكون حدود عناصر التحكّم رمادية ويوضّح نص المساعدة أدناه أنّ كل عنصر تحكّم سيطابق حاليًا أداة اختيار الفئة الزائفة :invalid. تعرِض لقطة الشاشة الثانية النموذج نفسه بعد أن يقدّم المستخدِم إدخالاً لكلّ عنصر تحكّم. تكون حدود عناصر التحكّم خضراء ويوضّح نص المساعدة أدناه أنّ كل عنصر تحكّم سيطابق حاليًا عنصرَي اختيار الفئة الزائفة :valid و :user-valid. تعرض لقطة الشاشة الثالثة والأخيرة النموذج نفسه بعد أن أزال المستخدم كل المعلومات التي أدخلها. تكون حدود عناصر التحكّم باللون الأحمر ويوضّح نص المساعدة أدناه أنّ كل عنصر تحكّم سيطابق حاليًا عنصرَي اختيار الفئة الزائفة :invalid و :user-invalid.

تتم مطابقة المحدّدات استنادًا إلى مجموعة من تفاعلات المستخدِم وحدود التحقّق. يمكنك التفاعل مع العرض التوضيحي التالي للاطّلاع على هذه الميزات أثناء استخدامها:

تجربة أفضل للمستخدمين باستخدام رمز أقل

بدون هذه الفئات الزائفة، كان من الضروري كتابة رمز إضافي يعتمد على الحالة لتحقيق تجربة المستخدم التي تتيحها علامتا الترميز :user-valid و:user-invalid. كان هذا الرمز البرمجي مطلوبًا لتتبُّع القيمة الأولية وحالة التركيز الحالية في حقل الإدخال ومدى التغييرات التي أجراها المستخدم على القيمة وإجراء فحص إضافي للصحة وأخيرًا إضافة فئة لاختيار التصميم. يمكنك الآن الاعتماد على المتصفّح لتنفيذ كل هذه الإجراءات تلقائيًا.

مزيد من الموارد

صورة الغلاف تقدّمها بهزاد غفاريان على Unsplash.