الفئات الزائفة من نوع :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 و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>

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

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

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

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

• ‎:user-valid - مستندات ويب MDN
• :user-invalid - مستندات ويب MDN
• الفئات الزائفة المستندة إلى تفاعل المستخدِم - مسودة محرِّر W3C
• Form Constraint Validation - MDN web docs
• الدليل التعليمي لتسهيل الاستخدام في "نماذج Google" - مبادرة تسهيل الاستخدام على الويب

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