شرح صفوف ومحتوى الفقرة
يعرض بوتستراب نصوص التوجيه الشرطية عبر عنصرين شقيقين يوضعان بعد حقل الإدخال مباشرة: <div class="invalid-feedback"> لشرح خطأ الإدخال وكيفية إصلاحه بلغة بشرية واضحة، و<div class="valid-feedback"> الاختياري لطمأنة المستخدم عند استيفاء الشروط.
يبقى كلا العنصرين مخفيين بـ display: none في الوضع الطبيعي، ولا يظهر أحدهما إلا عندما يحمل النموذج الأب .was-validated (فيتفاعل مع حالتَي :invalid و:valid الأصيلتين) أو عندما يحمل الحقل نفسه كلاس حالة صريحاً.
HTML
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');
});
});