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.

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

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

الموارد

• FormData
• القيود المفروضة على واجهة برمجة التطبيقات للتحقّق من صحة القيود
• <input type="password">