JavaScript

الردّ على أحداث التفاعلات مع النماذج

يمكنك استخدام JavaScript للردّ على تفاعلات المستخدمين في النموذج، وعرض حقول نموذج إضافية، وإرسال نموذج، وغير ذلك الكثير.

مساعدة المستخدمين في ملء عناصر التحكّم الإضافية في النماذج

لنفترض أنّك أنشأت نموذج استطلاع. بعد أن يختار المستخدم خيارًا واحدًا، يمكنك عرض <input> إضافي لطرح سؤال محدّد مرتبط بالاختيار. كيف يمكنك عرض عنصر <input> ذي الصلة فقط؟

لا يمكنك استخدام JavaScript لعرض <input> إلا عندما يكون <input type="radio"> المرتبط به محدّدًا حاليًا.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

لنلقِ نظرة على رمز JavaScript للعرض التوضيحي. هل لاحظت السمتَين aria-controls وaria-expanded؟ استخدِم سمات ARIA هذه لمساعدة مستخدمي قارئ الشاشة على فهم الحالات التي يتم فيها عرض عنصر تحكّم إضافي في النموذج أو إخفاؤه.

التأكّد من أنّه يمكن للمستخدمين إرسال نموذج بدون مغادرة الصفحة

تخيل أنّ لديك نموذج تعليقات. عندما يضيف القارئ تعليقًا ويرسل النموذج، من الأفضل أن يظهر له التعليق على الفور بدون إعادة تحميل الصفحة.

لتحقيق ذلك، استمع إلى الحدث onsubmit، ثم استخدِم event.preventDefault() لمنع السلوك التلقائي، وأرسِل FormData باستخدام Fetch API.

Browser Support

  • Chrome: 42.
  • Edge: 14.
  • Firefox: 39.
  • Safari: 10.1.

Source

يمكن للنص البرمجي للخلفية التحقّق مما إذا كان طلب POST يبدو أنّه من المتصفّح (باستخدام سمة action لعنصر النموذج، حيث method="post") أو من JavaScript ، مثل طلب fetch().

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

أبلِغ دائمًا مستخدمي قارئ الشاشة بتغييرات المحتوى الديناميكي. أضِف عنصرًا يتضمّن سمة aria-live="polite" إلى ملف HTML، وعدِّل محتوى العنصر بعد إجراء تغيير. على سبيل المثال، يمكنك تعديل النص إلى "تم نشر تعليقك بنجاح" بعد أن يرسل المستخدم تعليقًا.

مزيد من المعلومات حول مناطق ARIA المباشرة

التحقّق من الصحة باستخدام JavaScript

التأكّد من توافق رسائل الخطأ مع أسلوب موقعك الإلكتروني ونبرة علامتك التجارية

تختلف صيغة رسائل الخطأ التلقائية بين المتصفّحات. كيف يمكنك التأكّد من عرض الرسالة نفسها لجميع المستخدمين، ومن أنّ الرسالة تتوافق مع نمط موقعك الإلكتروني ونبرة أسلوبه؟ استخدِم طريقة setCustomValidity() في Constraint Validation API لتحديد رسائل الخطأ الخاصة بك.

التأكّد من إرسال إشعارات إلى المستخدمين بشأن الأخطاء في الوقت الفعلي

إنّ ميزات HTML المضمّنة للتحقّق من صحة النموذج رائعة لإعلام المستخدمين بالحقول غير الصالحة في النموذج قبل إرسال البيانات إلى الخلفية. ألا يكون من الرائع إشعار المستخدمين فور مغادرتهم حقل نموذج؟

انتبِه إلى الحدث blur الذي يتم تشغيله عندما يفقد عنصر التركيز، واستخدِم واجهة ValidityState لرصد ما إذا كانت عناصر التحكّم في النموذج غير صالحة.

التأكّد من أنّه يمكن للمستخدمين الاطّلاع على كلمة المرور التي أدخلوها

يتم إخفاء النص الذي يتم إدخاله في الحقل <input type="password"> تلقائيًا، لاحترام خصوصية المستخدمين. يمكنك مساعدة المستخدمين على إدخال كلمة المرور من خلال عرض <button> لتبديل إمكانية رؤية النص الذي تم إدخاله.

جرِّب الإصدار التجريبي. بدِّل مستوى رؤية النص الذي أدخلته باستخدام رمز إظهار كلمة المرور <button>. كيف يتم ذلك؟ عند النقر على عرض كلمة المرور، تتغيّر سمة type لحقل كلمة المرور من type="password" إلى type="text"، ويتغيّر نص <button> إلى "إخفاء كلمة المرور".

من المهم إتاحة زر إظهار كلمة المرور. اربط <button> بـ <input type="password"> باستخدام السمة aria-controls.

لإعلام مستخدمي قارئ الشاشة إذا كانت كلمة المرور معروضة أو مخفية حاليًا، استخدِم عنصرًا مخفيًا مع aria-live="polite"، وغيِّر نصه وفقًا لذلك. من المهم السماح لمستخدمي قارئ الشاشة بمعرفة وقت عرض كلمة المرور وظهورها لشخص آخر ينظر إلى الشاشة.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

مزيد من المعلومات عن تنفيذ خيار عرض كلمة المرور

الموارد