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.

دعم المتصفح

  • 42
  • 14
  • 39
  • 10.1

المصدر

يمكن أن يتحقّق النص البرمجي للخلفية مما إذا كان طلب 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 حسابكِ 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>

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

المراجِع