مقدمة
في الدرس السابق تعرفنا على الأحداث (Events)، وكيف يمكن لـ JavaScript الاستجابة لتفاعل المستخدم.
ومن أكثر الأماكن التي تحتاج إلى التفاعل مع المستخدم النماذج (Forms).
تستخدم النماذج لجمع بيانات مثل الاسم والبريد الإلكتروني وكلمات المرور وغيرها.
---
ما هو Form؟
الـ Form هو جزء من صفحة HTML يسمح للمستخدم بإدخال البيانات وإرسالها.
ومن أشهر عناصر النماذج:
حقول النص
حقول البريد الإلكتروني
حقول كلمة المرور
مربعات الاختيار
الأزرار
القوائم
---
قراءة بيانات المستخدم
يمكن لـ JavaScript الوصول إلى عناصر النموذج وقراءة القيم التي أدخلها المستخدم.
وهذا يسمح للبرنامج بمعالجة البيانات قبل إرسالها أو استخدامها داخل التطبيق.
---
حدث Submit
عند إرسال النموذج يحدث حدث يسمى:
submit
يمكن لـ JavaScript الاستماع إلى هذا الحدث وتنفيذ عمليات معينة قبل إرسال البيانات.
وهذا مفيد للتحقق من صحة المدخلات.
---
التحقق من البيانات
يسمى التأكد من أن البيانات التي أدخلها المستخدم صحيحة Validation.
مثلًا يمكن التحقق من:
أن الحقل غير فارغ
أن البريد الإلكتروني مكتوب بالشكل المناسب
أن البيانات تحقق شروطًا معينة
أن القيم المدخلة ضمن نطاق محدد
---
منع الإرسال الافتراضي
في بعض الحالات نريد معالجة النموذج باستخدام JavaScript بدلًا من ترك المتصفح ينفذ السلوك الافتراضي.
يمكن منع السلوك الافتراضي للحدث ثم تنفيذ المعالجة المطلوبة.
---
رسائل الخطأ
عندما تكون البيانات غير صحيحة، من المهم إخبار المستخدم بالمشكلة بطريقة واضحة.
يمكن عرض رسالة بجانب الحقل أو في مكان مناسب داخل الصفحة.
ويفضل أن تكون الرسالة واضحة وتخبر المستخدم بما يحتاج إلى تصحيحه.
---
Forms وDOM
يعتمد التعامل مع النماذج على المفاهيم التي تعلمناها في DOM.
نصل إلى عناصر النموذج، نقرأ قيمها، نستجيب للأحداث، ثم نعدل الصفحة بناءً على نتيجة التحقق.
---
Forms وAPIs
بعد التحقق من البيانات، يمكن إرسالها إلى خادم أو API.
وهنا يمكن الجمع بين عدة مفاهيم تعلمناها سابقًا:
Forms + Events + DOM + Fetch API + JSON
وهذه الأدوات تشكل جزءًا مهمًا من تطوير تطبيقات الويب.
---
استخدام Forms في المشاريع
تستخدم النماذج في:
صفحات تسجيل الدخول
إنشاء الحسابات
البحث
التواصل
المتاجر الإلكترونية
إعدادات المستخدم
---
فوائد التحقق من البيانات
من أهم فوائده:
اكتشاف الأخطاء مبكرًا
تحسين تجربة المستخدم
تقليل البيانات غير الصحيحة
منع إرسال بيانات ناقصة
تحسين جودة البيانات التي تصل إلى الخادم
> ملاحظة مهمة: التحقق في المتصفح لا يغني عن التحقق في الخادم، لأن المستخدم يستطيع تجاوز JavaScript الموجودة في المتصفح.
---
أخطاء شائعة عند المبتدئين
من الأخطاء الشائعة:
الاعتماد على التحقق في المتصفح فقط
عدم التعامل مع الحقول الفارغة
عرض رسائل خطأ غير واضحة
نسيان التعامل مع حدث submit
إرسال البيانات قبل التحقق منها
---
ملخص الدرس
تعرفنا في هذا الدرس على Forms في JavaScript، وكيف يمكن قراءة بيانات المستخدم والتحقق منها والتعامل مع حدث submit، كما تعرفنا على العلاقة بين Forms وDOM وFetch API وJSON.
في الدرس السابع والثلاثون سنتعرف على التخزين المحلي (Local Storage)، وسنفهم كيف يمكن حفظ بيانات بسيطة داخل متصفح المستخدم واسترجاعها لاحقًا.