LESSON 06 · FORMS & VALIDATION

النماذج والتحقق
بوابة التفاعل الحقيقي مع المستخدم

تعلّم بناء نماذج احترافية وتحقق ذكي من البيانات — من أبسط حقل نصي حتى التحقق المتقدم بـ JavaScript.

القسم الأول

🏗️ بنية النموذج من الصفر

النموذج (<form>) هو حاوية تجمع حقول الإدخال. عند الضغط على زر الإرسال، يجمع المتصفح كل البيانات ويرسلها معاً.

basic-form.html — الهيكل الكامل

<!-- tag form: الحاوية الرئيسية -->
كل حقول الإدخال داخله
<form
بداية النموذج
  action="/submit"
action = الرابط الذي ترسل إليه البيانات
  method="POST"
method = طريقة الإرسال (GET أو POST)
  id="registration-form"
id للوصول إليه من JS
  novalidate>
novalidate = نعطّل تحقق المتصفح ونتولى نحن
 
  <!-- حقل الاسم -->
مجموعة label + input
  <div class="form-group">
div يجمع label والـ input معاً
    <label for="name">الاسم الكامل *</label>
for="name" يربط الـ label بـ id="name"
    <input
بداية حقل الإدخال
      type="text"
نوع النص العادي
      id="name"
يطابق for في label — إلزامي للربط
      name="fullname"
المفتاح الذي يصل للسيرفر: fullname=القيمة
      placeholder="مثال: أحمد محمد"
نص رمادي يختفي عند الكتابة
      required
حقل إجباري — لا يُرسل فارغاً
      autocomplete="name">
يساعد المتصفح في الإكمال التلقائي
    <span class="error-msg" id="name-error"></span>
حاوية رسالة الخطأ — تبقى فارغة عادةً
  </div>
إغلاق form-group
 
  <!-- زر الإرسال -->
  <button type="submit">إرسال</button>
type="submit" يُرسل النموذج عند الضغط
  <button type="reset">مسح</button>
type="reset" يمسح كل الحقول
  <button type="button">زر عادي</button>
type="button" لا يرسل — للـ JS فقط
</form>
إغلاق النموذج

method	متى تستخدمه	ملاحظة
GET	بحث، فلترة — بيانات غير حساسة	البيانات تظهر في URL — مرئية للجميع
POST	تسجيل، دخول، إرسال بيانات حساسة	البيانات في body الطلب — أكثر أماناً

لماذا label مهمة جداً؟
1️⃣ النقر على نص الـ label يُفعّل الحقل تلقائياً (تجربة مستخدم أفضل)
2️⃣ قارئات الشاشة لذوي الاحتياجات الخاصة تقرأ الـ label عند التركيز على الحقل
3️⃣ مهمة لإمكانية الوصول (Accessibility) وهي متطلب قانوني في كثير من الدول

القسم الثاني

📋 نموذج تسجيل كامل — كل نوع موضّح

complete-form.html

<form action="/register" method="POST">
 
  <!── نص عادي ──>
  <label for="user">اسم المستخدم:</label>
for يطابق id الحقل
  <input type="text" id="user" name="username" minlength="3" maxlength="20" required>
minlength + maxlength = قيود الطول
 
  <!── بريد إلكتروني ──>
يتحقق من @ تلقائياً
  <label for="email">البريد الإلكتروني:</label>
  <input type="email" id="email" name="email" required>
يرفض أي نص بدون @ و domain
 
  <!── كلمة المرور ──>
تُخفى بنقاط
  <label for="pass">كلمة المرور:</label>
  <input type="password" id="pass" name="password" minlength="8" required>
يُخفي الكتابة ● — minlength=8 لأمان أفضل
 
  <!── أرقام مقيدة ──>
رقم ضمن نطاق
  <label for="age">العمر:</label>
  <input type="number" id="age" name="age" min="13" max="120" step="1">
min/max = الحد الأدنى والأقصى، step = الخطوة
 
  <!── القائمة المنسدلة ──>
select dropdown
  <label for="country">الدولة:</label>
  <select id="country" name="country" required>
select = قائمة منسدلة
    <option value="" disabled selected>اختر دولتك</option>
خيار افتراضي فارغ — disabled يمنع اختياره
    <option value="sa">السعودية</option>
value يُرسل للسيرفر، النص يظهر للمستخدم
    <option value="eg">مصر</option>
    <option value="ae">الإمارات</option>
  </select>
إغلاق select
 
  <!── مربعات الاختيار ──>
checkboxes — اختيارات متعددة
  <fieldset>
fieldset يجمع عناصر ذات صلة
    <legend>اهتماماتك:</legend>
legend = عنوان الـ fieldset
    <input type="checkbox" id="html" name="interests" value="html">
name متشابه = مجموعة واحدة
    <label for="html">HTML</label>
النقر على النص يختار الـ checkbox
    <input type="checkbox" id="css" name="interests" value="css">
يمكن اختيار أكثر من واحد
    <label for="css">CSS</label>
  </fieldset>
إغلاق fieldset
 
  <!── أزرار الاختيار الوحيد ──>
radio — اختيار واحد فقط
  <fieldset>
    <legend>الجنس:</legend>
    <input type="radio" id="male" name="gender" value="male">
name متشابه = مجموعة radio — اختيار واحد فقط
    <label for="male">ذكر</label>
    <input type="radio" id="female" name="gender" value="female">
نفس الـ name = نفس المجموعة
    <label for="female">أنثى</label>
  </fieldset>
 
  <!── منطقة نصية ──>
textarea للنصوص الطويلة
  <label for="bio">نبذة عنك:</label>
  <textarea id="bio" name="bio" rows="4" cols="40" maxlength="500"></textarea>
textarea ≠ input — له tag إغلاق. rows/cols للحجم
 
  <button type="submit">تسجيل الحساب</button>
يُرسل النموذج
</form>

القسم الثالث

⚡ التحقق بـ JavaScript — المستوى الاحترافي

التحقق المدمج في HTML جيد للبداية، لكن JavaScript يمنحك تحكماً كاملاً في رسائل الخطأ وتوقيتها وشكلها.

validation.js — التحقق الكامل سطراً سطراً

// 1. الحصول على النموذج من الصفحة
const form = document.querySelector('#registration-form');
نأخذ النموذج بالـ id الخاص به
 
// 2. الاستماع لحدث الإرسال (submit event)
form.addEventListener('submit', (event) => {
'submit' يُطلق عند الضغط على زر الإرسال
 
  // 3. إيقاف إرسال النموذج مؤقتاً
  event.preventDefault();
يمنع الإرسال الفوري حتى نتحقق من البيانات
 
  // 4. قراءة قيم الحقول
  const name  = document.getElementById('name').value.trim();
.value يأخذ ما كتبه المستخدم، .trim() يحذف المسافات
  const email = document.getElementById('email').value.trim();
نفس الطريقة للإيميل
  const pass  = document.getElementById('pass').value;
كلمة المرور بدون trim (المسافات قد تكون مقصودة)
 
  // 5. متغير لتتبع صحة النموذج
  let isValid = true;
نبدأ بافتراض أن كل شيء صحيح
 
  // 6. التحقق من الاسم
  if (name.length < 3) {
إذا كان الاسم أقل من 3 أحرف
    showError('name-error', 'الاسم يجب أن يكون 3 أحرف على الأقل');
اعرض رسالة خطأ مخصصة
    isValid = false;
النموذج غير صحيح
  } else {
الاسم صحيح
    clearError('name-error');
امسح رسالة الخطأ السابقة
  }
 
  // 7. التحقق من الإيميل بـ RegEx
نمط التحقق من الإيميل
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
RegEx: لا مسافات، @ إلزامية، نقطة ونطاق بعدها
  if (!emailPattern.test(email)) {
.test() يُرجع true/false
    showError('email-error', 'يرجى إدخال بريد إلكتروني صحيح');
    isValid = false;
  }
 
  // 8. التحقق من كلمة المرور
متطلبات الأمان
  const passPattern = /^(?=.*[A-Z])(?=.*\d).{8,}$/;
8+ أحرف، حرف كبير واحد على الأقل، رقم واحد
  if (!passPattern.test(pass)) {
    showError('pass-error', '8 أحرف + حرف كبير + رقم');
رسالة توضح المتطلبات
    isValid = false;
  }
 
  // 9. إرسال النموذج إذا كل شيء صحيح
  if (isValid) {
فقط إذا لم يكن هناك أخطاء
    console.log('كل شيء صحيح — إرسال البيانات...');
    form.submit();
الإرسال البرمجي
  }
});
نهاية الـ addEventListener
 
// دوال مساعدة
helper functions
function showError(id, msg) {
تظهر رسالة الخطأ في العنصر المحدد
  document.getElementById(id).textContent = msg;
يكتب الرسالة داخل span الخطأ
}
function clearError(id) {
تمسح رسالة الخطأ
  document.getElementById(id).textContent = '';
رسالة فارغة = لا يوجد خطأ
}

فهم RegEx المستخدمة:
/^[^\s@]+@[^\s@]+\.[^\s@]+$/ لتحقق الإيميل:
^ = بداية النص | [^\s@]+ = أحرف بدون مسافة أو @ | @ = علامة @ إلزامية | \. = نقطة | $ = نهاية النص

/^(?=.*[A-Z])(?=.*\d).{8,}$/ لكلمة المرور:
(?=.*[A-Z]) = يجب أن يحتوي حرفاً كبيراً | (?=.*\d) = يجب أن يحتوي رقماً | .{8,} = 8 أحرف على الأقل

🛠️ نموذج تفاعلي كامل:

الكود الكامل:

النتيجة:

النماذج والتحققبوابة التفاعل الحقيقي مع المستخدم

🏗️ بنية النموذج من الصفر

📋 نموذج تسجيل كامل — كل نوع موضّح

⚡ التحقق بـ JavaScript — المستوى الاحترافي

🛠️ نموذج تفاعلي كامل:

🧠 اختبار النماذج

النماذج والتحقق
بوابة التفاعل الحقيقي مع المستخدم