بناء صفحة هبوط تجارية والتحقق من صحة النماذج برمجياً لمنع المدخلات الخاطئة

الهدف الأساسي لأي موقع تجاري أو صفحة هبوط (Landing Page) تبنيها لعميل هو جمع طلبات الزبائن (Leads). إذا كان النموذج يرسل بيانات فارغة أو يتعطل دون تنبيه الزائر بالمشكلة، سيتوقف النشاط التجاري وتفقد مصداقيتك.

التحقق من المدخلات (Form Validation) في الواجهة الأمامية يحسن تجربة الاستخدام فوراً: يخبر الزائر أن البريد ينقصه رمز @ أو أن رقم الهاتف قصير جداً قبل إرهاق الخادم أو خسارة الطلب.

في هذا الدرس سنبني نموذج تواصل تجارياً متكاملاً، نمنع سلوك التحديث التلقائي للصفحة، ونفحص الحقول ونعرض رسالة نجاح مبهجة للزائر.

1. أضف وسماً للنموذج
   في قسم التواصل يحتوي على حقول الاسم، البريد، الهاتف، ونوع الخدمة المطلوبة. شو رح تشوف على الشاشة: نموذج مرتب يضم حقولاً واضحة مع وسوم وعلامة (*) للحقول الإلزامية. إذا ما ظهرلك: استخدام وسم مع ربطه بخاصية for يحسن تجربة الاستخدام وإمكانية الوصول.
2. أضف وسماً لرسائل التنبيه تحت كل حقل: . شو رح تشوف على الشاشة: مساحات مخصصة لرسائل التنبيه مخفية افتراضياً وتظهر فقط عند وجود خطأ في الإدخال. إذا ما ظهرلك: تنسيق رسائل الخطأ بلون أحمر وحجم خط أصغر يوضح التنبيه مباشرة.
3. في ملف main.js، التقط النموذج واستمع لحدث الإرسال: const form = document.querySelector('#leadForm'); form.addEventListener('submit', validateForm);. شو رح تشوف على الشاشة: السكربت يراقب لحظة ضغط الزائر على زر إرسال الطلب ليجري الفحص قبل المعالجة. إذا ما ظهرلك: حدث submit أفضل من click على الزر لأنه يغطي ضغط مفتاح Enter داخل الحقول أيضاً.
4. في دالة الفحص validateForm، أوقف السلوك التلقائي أولاً: e.preventDefault(); لمنع الصفحة من إعادة التحميل. شو رح تشوف على الشاشة: الصفحة تبقى مستقرة في مكانها دون أن تومض أو تفقد ما كتبه الزائر. إذا ما ظهرلك: هذا السطر إلزامي في كل معالجات النماذج الحديثة بنظام الواجهات الأحادية.
5. افحص حقل الاسم وتأكد أن طوله لا يقل عن 3 أحرف بعد إزالة الفراغات: if (nameInput.value.trim().length < 3) { ... }. شو رح تشوف على الشاشة: إذا كتب الزائر حرفاً واحداً أو فراغات، تظهر رسالة 'يرجى كتابة اسمك الكامل ثلاثي على الأقل'. إذا ما ظهرلك: تابع trim() يزيل المسافات الفارغة التي قد يضعها الزائر بالخطأ.
6. تحقق من صيغة البريد الإلكتروني عبر فحص احتواء النص على رمز @ ونقطة (.) أو عبر تعبير نمطي (Regex). شو رح تشوف على الشاشة: إذا كتب الزائر إيميلاً بلا علامة @، يُلوّن إطار الحقل بالأحمر ويظهر تنبيه لتصحيحه. إذا ما ظهرلك: يمكنك أيضاً الاعتماد على نوع الحقل type='email' كحماية أولية.
7. إذا اجتازت كل الحقول الفحص بنجاح، اعرض صندوق رسالة نجاح أنيقة وأفرغ الحقول عبر form.reset(). شو رح تشوف على الشاشة: صندوق أخضر مبهج يظهر بعبارة 'شكراً لك، تم استلام طلبك وسنتواصل معك خلال 24 ساعة'. إذا ما ظهرلك: تفريغ النموذج يؤكد للمستخدم أن طلبه أرسل بنجاح ويمنع تكرار الإرسال.
8. اختبر النموذج بنفسك: جرّب الضغط على إرسال وهو فارغ، ثم جرب كتابة بريد ناقص، ثم املأ البيانات صحيحة وتأكد من النتيجة. شو رح تشوف على الشاشة: النموذج يعترض المدخلات غير السليمة بدقة، ويقبل البيانات الصحيحة ويعرض رسالة النجاح. إذا ما ظهرلك: هذا الاختبار الشامل هو ما يميز الكود الحقيقي الجاهز للتسليم في بيئة الإنتاج.