في هذا الدرس 7تصفّح المواضيع
تمتلك متصفحات الويب الحديثة محرك تحقق أصيل يُعرف بواجهة قيود التحقق في HTML5 عبر سمات مثل required وminlength وtype="email" وpattern، غير أن الفقاعات التنبيهية الافتراضية التي يطلقها المتصفح تعاني من عيبين أساسيين: تباين شكلها ولغتها بين المتصفحات، واستحالة تنسيقها عبر CSS.
يمنحك Bootstrap 5 أفضل ما في العالمين: أضف السمة المنطقية novalidate والكلاس الاصطلاحي .needs-validation إلى وسم <form> لإخفاء فقاعات المتصفح المزعجة، مع الإبقاء الكامل على فحص القيود البرمجي في الذاكرة ليقرأه بوتستراب ويعرض رسائلك المنسقة الأنيقة بدلاً منها.
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="em" class="form-label">Work Email</label>
<input type="email" class="form-control" id="em"
required>
<div class="invalid-feedback">Enter valid email.</div>
</div>
<button class="btn btn-primary" type="submit">Go</button>
</form>لو وضعنا كلاس .was-validated على النموذج منذ لحظة فتح الصفحة، لظهرت جميع الحقول الفارغة المطلوبة باللون الأحمر المزعج قبل أن يلمس المستخدم لوحة المفاتيح! لذلك تقتضي الممارسة القياسية في Bootstrap 5 الاستماع لحدث submit على جميع نماذج .needs-validation، وفحص صحة القيود عبر الدالة الأصيلة form.checkValidity().
فإذا أعادت الدالة false نوقف الإرسال فوراً عبر event.preventDefault() وevent.stopPropagation()، ثم نضيف الكلاس .was-validated ليبدأ المتصفح بتحديث الألوان والرسائل حياً مع كل حرف يصححه المستخدم.
يعرض بوتستراب نصوص التوجيه الشرطية عبر عنصرين شقيقين يوضعان بعد حقل الإدخال مباشرة: <div class="invalid-feedback"> لشرح خطأ الإدخال وكيفية إصلاحه بلغة بشرية واضحة، و<div class="valid-feedback"> الاختياري لطمأنة المستخدم عند استيفاء الشروط.
يبقى كلا العنصرين مخفيين بـ display: none في الوضع الطبيعي، ولا يظهر أحدهما إلا عندما يحمل النموذج الأب .was-validated (فيتفاعل مع حالتَي :invalid و:valid الأصيلتين) أو عندما يحمل الحقل نفسه كلاس حالة صريحاً.
const selector = '.needs-validation';
document.querySelectorAll(selector).forEach((form) => {
form.addEventListener('submit', (e) => {
if (!form.checkValidity()) {
e.preventDefault();
e.stopPropagation();
}
form.classList.add('was-validated');
});
});هناك أخطاء يستحيل على المتصفح اكتشافها بمفرده مثل «اسم المستخدم محجوز مسبقاً في قاعدة البيانات» أو «انتهت صلاحية رمز الدعوة». عند عودة الرد من الخادم (سواء بإعادة تحميل الصفحة في Laravel أو عبر طلب AJAX)، نستخدم الكلاسين الصريحين .is-invalid و.is-valid مباشرة على الحقول المعنية دون الحاجة لسمة novalidate أو كلاس .was-validated.
<div class="mb-3">
<label for="srvName" class="form-label">Handle</label>
<input type="text" class="form-control is-invalid"
id="srvName" value="admin"
aria-describedby="srvErr" aria-invalid="true">
<div id="srvErr" class="invalid-feedback">
This handle is already reserved.
</div>
</div>ينطبق نظام التحقق ذاته على مربعات الموافقة الإلزامية ومجموعات الإدخال المدمجة: ففي حالة .form-check يوضع عنصر .invalid-feedback داخل حاوية .form-check نفسها بعد وسم <label> مباشرًة ليتلون نص الموافقة والمربع بالأحمر مع إظهار الرسالة تحتها. أما في حالة .input-group فيُضاف الكلاس المساعد .has-validation على الحاوية الأب لضمان بقاء الزوايا الخارجية مستديرة بجمالية تامة.
في أشرطة الأدوات الضيقة أو الصفوف الأفقية المكتظة التي لا تحتمل إزاحة العناصر السفلية عند ظهور سطر خطأ جديد، يمكنك استبدال .invalid-feedback و.valid-feedback بالكلاسين العائمين .invalid-tooltip و.valid-tooltip، بشرط منح العنصر الأب المباشر للحقل الكلاس .position-relative ليعمل كمرجع تموضع مطلق للتلميح.
اختبر الأنواع الأربعة للتحقق التفاعلي وتلميحات الخطأ في المختبر الحي التالي:
القاعدة الذهبية في هندسة الويب الاحترافية لا تقبل المساومة: التحقق في المتصفح وُجد لتحسين تجربة المستخدم وسرعة استجابته فقط، وليس جدار حماية أمنياً على الإطلاق! فأي مستخدم يستطيع فتح أدوات المطور في المتصفح وحذف سمة required، أو إرسال طلب HTTP POST خام مباشرة عبر سطر الأوامر متجاوزاً الصفحة بأكملها.
لذلك يجب دائماً تنفيذ قواعد التحقق والتعقيم الصارمة على الخادم الخلفي أولاً، ثم إرجاع أخطاء الحقول وعرضها للمستخدم عبر .is-invalid و.invalid-feedback بتناغم كامل.
<div class="input-group has-validation mb-4">
<span class="input-group-text">@</span>
<input type="text" class="form-control is-invalid"
required>
<div class="invalid-feedback">Username required.</div>
</div>
<div class="position-relative pb-4">
<input type="text" class="form-control is-invalid">
<div class="invalid-tooltip">Invalid API key!</div>
</div>يجمع الجدول المرجعي الشامل التالي كافة كلاسات وسمات ودوال التحقق من النماذج في Bootstrap 5.3:
| الكلاس أو السمة أو الدالة | العنصر المستهدف | الوظيفة المعمارية في دورة التحقق |
|---|---|---|
novalidate | وسم <form> | إيقاف فقاعات تنبيه المتصفح الافتراضية مع بقاء فحص القيود البرمجي نشطاً |
.was-validated | وسم <form> بعد الإرسال | تفعيل أنماط :valid و:invalid على كافة حقول النموذج |
form.checkValidity() | دالة DOM في JS | إرجاع true إذا استوفت جميع الحقول شروطها أو false عند وجود خطأ |
.is-valid / .is-invalid | عنصر الحقل مباشرة | تمثيل نتيجة تحقق الخادم أو التحقق المخصص لكل حقل على حدة |
.valid / invalid-feedback | شقيق بعد الحقل | إظهار نص التوجيه الأخضر أو رسالة الخطأ الحمراء أسفل الحقل |
.has-validation | حاوية .input-group | الحفاظ على استدارة الزوايا الخارجية عند إلحاق رسالة تحقق بالمجموعة |
.valid / invalid-tooltip | داخل أب .position-relative | إظهار تلميح عائم فوق السطر دون إزاحة عناصر التخطيط السفلية |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
اختتمت في هذا الدرس الموديول السادس بإتقان دورة التحقق الكاملة في بوتستراب 5: تعطيل فقاعات المتصفح عبر novalidate، وتفعيل .was-validated بدالة checkValidity()، وعرض رسائل التغذية الراجعة وتلميحات الخطأ العائمة ونتائج الخادم .is-invalid مع احترام الحد الأمني للخادم. الخطوة التالية: انتقل الآن إلى الموديول السابع ومكوّنات بوتستراب التفاعلية للبدء بدرس «الطي والأكورديون في بوتستراب 5»!
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Constraint Validation API واجهة فحص القيود الأصيلة
- الدوال البرمجية المدمجة في المتصفح مثل checkValidity() لفحص شروط الحقول المطلوبة والصيغ القياسية.
- للمراجعة
- 02 Post-Submit Validation Class كلاس التفعيل بعد الإرسال
- الكلاس .was-validated الذي يضاف للنموذج عند محاولة الإرسال لإظهار ألوان ورسائل التحقق دون إزعاج مسبق.
- للمراجعة
- 03 Server Validation State Class كلاس حالة تحقق الخادم
- الكلاسان الصريحان .is-invalid و.is-valid الموضوعان على الحقول لعرض نتائج الفحص العائدة من الخادم.
- للمراجعة
- 04 Validation Tooltip تلميح التحقق العائم
- صندوق رسالة عائم يظهر فوق المساحة المحيطة دون إزاحة عناصر الصفحة بفضل وجود .position-relative على الأب.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 API API
- Application Programming Interface
- واجهة برمجة التطبيقات — توفر دالة الفحص القياسية checkValidity() على عناصر النماذج في المتصفح.
- للمراجعة
- 02 WCAG WCAG
- Web Content Accessibility Guidelines
- إرشادات إتاحة محتوى الويب — توجب عدم الاعتماد على اللون وحده لإظهار الخطأ وربط رسائل الرفض بقارئات الشاشة.
- للمراجعة
- 03 HTTP HTTP
- HyperText Transfer Protocol
- بروتوكول نقل النص الفائق — يمكن إرسال طلبات مباشرة عبره متجاوزة المتصفح، ولذا يظل التحقق على الخادم إلزامياً دائماً.
- للمراجعة
- 04 AJAX AJAX
- Asynchronous JavaScript and XML
- جافاسكريبت غير المتزامنة — تُستخدم لتبديل كلاس .is-invalid وعرض رسائل خطأ الخادم ديناميكياً دون إعادة تحميل الصفحة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ نموذجاً بكلاس needs-validation وسمة novalidate يضم بريداً مطلوباً واسم مستخدم مقيداً بـ pattern مع رسائل .invalid-feedback وكود جافاسكريبت يضيف .was-validated عند الإرسال.
-
صمّم حاوية .input-group.has-validation بحقل .is-invalid ورسالة .invalid-feedback، مع عمود .position-relative يعرض تلميح خطأ عائم .invalid-tooltip.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.