نظام التحقق من صحة النماذج (Form Validation) باستخدام HTML وCSS وJavaScript

? نظام التحقق من صحة النموذج (Form Validation System)

هذا المشروع عبارة عن نظام للتحقق من صحة إدخال البيانات في النماذج (Form Validation) تم تطويره باستخدام HTML وCSS وJavaScript. يقوم النظام بالتحقق من صحة بيانات المستخدم في الوقت الفعلي (Real-time) وعند إرسال النموذج، لضمان إدخال جميع البيانات المطلوبة بشكل صحيح قبل الإرسال.

? التحقق يشمل:

* اسم المستخدم: مطلوب، من 3 إلى 15 حرفًا أبجديًا رقميًا

* البريد الإلكتروني: يجب أن يكون بصيغة صحيحة

* كلمة المرور: لا تقل عن 6 أحرف وتسمح بالرموز الخاصة

* رقم الهاتف: بصيغة رقم هاتف مصري صحيح

* النوع (Gender): يجب اختيار خيار واحد على الأقل

* اللغات: يجب اختيار لغتين على الأقل

✨ المميزات:

* التحقق الفوري أثناء إدخال البيانات (Real-time Validation) باستخدام أحداث input و change

* استخدام التعبيرات النمطية (Regex) للتحقق من صحة البيانات

* عرض رسائل خطأ بشكل ديناميكي

* إظهار تنسيق بصري يوضح الحالة:

* إطار أخضر عند صحة الإدخال

* إطار أحمر عند وجود خطأ

* إعادة توجيه المستخدم إلى صفحة نجاح بعد الإرسال الناجح

?️ التقنيات المستخدمة:

* HTML5

* CSS3

* JavaScript (التعامل مع DOM والتحقق من صحة النموذج)

⚙️ طريقة العمل:

* يتم منع إرسال النموذج الافتراضي باستخدام event.preventDefault()

* يتم التحقق من كل حقل بواسطة دالة مستقلة

* في حالة صحة جميع البيانات يتم تحويل المستخدم إلى صفحة success.html

* في حالة وجود أخطاء يتم عرض رسائل توضيحية لكل حقل