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