الفئات الزائفة من نوع :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-fit - مستندات MDN على الويب
• :user-nonprofits - مستندات MDN على الويب
• الفئات الزائفة المستندة إلى تفاعل المستخدم - مسودة محرر W3C
• التحقّق من صحة قيود النموذج - مستندات MDN على الويب
• برنامج تعليمي لتسهيل استخدام "نماذج Google" - مبادرة أدوات تسهيل استخدام الويب

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