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

إنّ إدخالات المستخدم هي من أكثر الأمور الحسّاسة في أي واجهة مستخدم. عنصر قابل للاستخدام أن يساعد التطبيق المستخدمين على رؤية وفهم وإصلاح أي أخطاء في إدخال. تساعد أدوات اختيار الفئة الزائفة :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-صالح - مستندات ويب MDN
• :user- invalid - مستندات ويب MDN
• الفئات الزائفة المستندة إلى تفاعل المستخدِم - مسودة محرِّر W3C
• Form Constraint Validation - MDN web docs
• الدليل التعليمي لتسهيل الاستخدام في "نماذج Google" - مبادرة تسهيل الاستخدام على الويب

صورة غلاف بهزاد غفاري على إلغاء البداية.