شرح صفوف ومحتوى الفقرة
القاعدة الذهبية في هندسة الويب الاحترافية لا تقبل المساومة: التحقق في المتصفح وُجد لتحسين تجربة المستخدم وسرعة استجابته فقط، وليس جدار حماية أمنياً على الإطلاق! فأي مستخدم يستطيع فتح أدوات المطور في المتصفح وحذف سمة 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»!