Facebook sign_in

اسم المشروع: Facebook-like Sign-Up Form with Validation

الهدف: إنشاء صفحة تسجيل مستخدم تفاعلية تشبه صفحة فيسبوك، مع التحقق من صحة البيانات قبل الإرسال.

المميزات:

واجهة مستخدم جذابة:

تصميم متجاوب باستخدام Bootstrap 5.

تقسيم الحقول بوضوح مع عناوين Labels لكل إدخال.

حقول الإدخال:

الاسم الأول والاسم الأخير (مع شرط أن يبدأ الحرف الأول بحرف كبير ولا يحتوي على فراغات، وعدد الحروف ≥3).

البريد الإلكتروني (مع التحقق باستخدام Regex).

رقم الهاتف (مع التحقق باستخدام Regex).

كلمة المرور وتأكيدها (كلمة المرور يجب أن تحتوي على '!' وأن يكون طولها >6).

الجنس (اختيار بين Male أو Female).

تاريخ الميلاد.

التحقق من صحة البيانات (JavaScript Validation):

عرض رسائل خطأ ديناميكية بجانب كل حقل عند وجود خطأ.

تغيير لون النص إلى الأحمر عند وجود خطأ.

التأكد من أن جميع الحقول الأساسية قد تم ملؤها بشكل صحيح قبل الإرسال.

إعادة ضبط الرسائل والألوان عند تصحيح البيانات.

التفاعل والتحكم:

زر Reset لمسح كل الحقول.

زر Register لإرسال النموذج بعد اجتياز جميع شروط التحقق.

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

HTML5 وCSS3

Bootstrap 5

JavaScript (DOM Manipulation & Validation)

الأهداف التعليمية:

تعلم تصميم واجهات مستخدم متجاوبة وجذابة.

ممارسة التحقق من صحة البيانات في النماذج باستخدام JavaScript.

فهم العلاقة بين HTML وCSS وJavaScript في مشروع عملي تفاعلي.