التحقق من النماذج وارسالها

لماذا نتحقق من النماذج؟

التحقق من النماذج يضمن ان المستخدمين يقدمون بيانات صحيحة وكاملة قبل ارسالها الى الخادم. بدون التحقق قد يستقبل تطبيقك حقولا فارغة او عناوين بريد الكتروني بتنسيق خاطئ او قيما خارج النطاق المقبول. يوفر HTML5 تحققا مدمجا قويا يعمل بدون اي JavaScript ويعطي المستخدمين ملاحظات فورية مباشرة في المتصفح. في هذا الدرس ستتعلم كيفية استخدام خصائص التحقق الاصلية في HTML وتنسيق الحقول الصالحة وغير الصالحة بـ CSS وفهم كيفية عمل ارسال النماذج.

خاصية required

ابسط اشكال التحقق هو جعل الحقل اجباريا. عندما تكون خاصية required موجودة يمنع المتصفح ارسال النموذج ويعرض رسالة خطا اذا ترك الحقل فارغا.

<form action="/register" method="POST">
  <label for="name">الاسم الكامل:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">البريد الالكتروني:</label>
  <input type="email" id="email" name="email" required>

  <label for="age">العمر:</label>
  <input type="number" id="age" name="age" required min="18" max="120">

  <button type="submit">تسجيل</button>
</form>

جرب ارسال هذا النموذج بحقول فارغة في متصفحك. سيبرز المتصفح اول حقل غير صالح ويعرض رسالة تلميح. النوع email يتحقق ايضا من ان القيمة تبدو كعنوان بريد الكتروني صحيح. النوع number مع min و max يضمن ان القيمة تقع ضمن النطاق المحدد.

التحقق بالنمط باستخدام التعبيرات النمطية

تتيح لك خاصية pattern تحديد تعبير نمطي يجب ان تتطابق معه قيمة الادخال. هذا قوي لفرض تنسيقات محددة مثل ارقام الهاتف والرموز البريدية واسماء المستخدمين.

<form action="/profile" method="POST">
  <label for="username">اسم المستخدم (حروف وارقام فقط، 3-16 حرفا):</label>
  <input type="text" id="username" name="username"
         pattern="[a-zA-Z0-9]{3,16}"
         title="3 الى 16 حرفا او رقما، بدون مسافات او رموز"
         required>

  <label for="phone">الهاتف (التنسيق: 555-123-4567):</label>
  <input type="tel" id="phone" name="phone"
         pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
         title="التنسيق: 555-123-4567"
         required>

  <label for="zip">الرمز البريدي الامريكي:</label>
  <input type="text" id="zip" name="zip"
         pattern="[0-9]{5}(-[0-9]{4})?"
         title="رمز بريدي من 5 ارقام، يمكن اضافة شرطة و4 ارقام">

  <button type="submit">حفظ الملف الشخصي</button>
</form>

توفر خاصية title وصفا مقروءا يضمه المتصفح في رسالة خطا التحقق. احرص دائما على استخدام title مع pattern حتى يفهم المستخدمون التنسيق المطلوب. يتم تثبيت النمط تلقائيا مما يعني انه يجب ان يتطابق مع القيمة بالكامل وليس جزءا منها فقط.

قيود الطول والنطاق

يمكنك التحكم في الحد الادنى والاقصى لطول حقول النص باستخدام minlength و maxlength. لحقول الادخال الرقمية تتحكم min و max و step في النطاق المقبول والزيادة. تعمل هذه الخصائص معا مع required لانشاء قواعد تحقق شاملة.

تنسيق الحقول الصالحة وغير الصالحة بـ CSS

يوفر CSS اصنافا زائفة تتيح لك الاشارة بصريا الى حالة التحقق لحقول النموذج. تتحدث هذه التنسيقات تلقائيا اثناء كتابة المستخدم مما يوفر ملاحظات بصرية فورية.

<style>
  /* الحقول التي تجتاز التحقق */
  input:valid {
    border: 2px solid #27ae60;
  }

  /* الحقول التي تفشل في التحقق */
  input:invalid {
    border: 2px solid #e74c3c;
  }

  /* الحقول المطلوبة الفارغة */
  input:required {
    border-left: 4px solid #f39c12;
  }

  /* الحقول الاختيارية */
  input:optional {
    border-left: 4px solid #95a5a6;
  }

  /* الحقول اثناء التحرير */
  input:focus:invalid {
    outline: none;
    box-shadow: 0 0 4px #e74c3c;
  }

  input:focus:valid {
    outline: none;
    box-shadow: 0 0 4px #27ae60;
  }
</style>

تطبق الاصناف الزائفة :valid و :invalid بناء على ما اذا كانت القيمة الحالية تستوفي جميع قيود التحقق. يتيح لك :required و :optional التمييز في التنسيق بناء على ما اذا كان الحقل اجباريا. دمج هذه مع :focus ينشئ تجربة متقنة حيث يرى المستخدمون ملاحظات التحقق فقط اثناء تحرير الحقل بشكل نشط.

ارسال النموذج: GET مقابل POST

عند ارسال النموذج يرسل المتصفح البيانات الى العنوان المحدد في خاصية action باستخدام طريقة HTTP المحددة في method. تختلف الطريقتان بشكل كبير.

<!-- GET: البيانات تظهر في الرابط كمعاملات استعلام -->
<form action="/search" method="GET">
  <input type="text" name="q" placeholder="بحث...">
  <button type="submit">بحث</button>
</form>
<!-- ارسال "html forms" ينتج: /search?q=html+forms -->

<!-- POST: البيانات ترسل في جسم الطلب، غير مرئية في الرابط -->
<form action="/register" method="POST">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">تسجيل</button>
</form>

<!-- رفع الملفات يتطلب POST مع enctype -->
<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="document">
  <button type="submit">رفع</button>
</form>

استخدم GET لعمليات البحث والتصفية حيث يجب ان يكون الرابط قابلا للحفظ والمشاركة. استخدم POST لانشاء البيانات او تعديلها وارسال كلمات المرور واي معلومات حساسة. طلبات GET لها حدود طول الرابط وتكشف البيانات في شريط العنوان وسجل المتصفح. طلبات POST ترسل البيانات في جسم الطلب حيث لا تكون مرئية في الرابط.

خاصية enctype حاسمة عند رفع الملفات. الترميز الافتراضي application/x-www-form-urlencoded لا يستطيع التعامل مع بيانات الملفات. يجب استخدام multipart/form-data عندما يتضمن نموذجك حقل ملفات. بدونه سيستقبل الخادم اسم الملف فقط وليس محتوى الملف الفعلي.

خاصية novalidate

احيانا اثناء التطوير او في بعض سيناريوهات العمل قد تحتاج لتجاوز تحقق المتصفح مؤقتا. خاصية novalidate على عنصر النموذج تعطل جميع عمليات التحقق المدمجة وتسمح بارسال النموذج بغض النظر عن قيم الحقول. يمكنك ايضا استخدام formnovalidate على زر ارسال محدد لتخطي التحقق لذلك الزر فقط مع ابقائه نشطا للازرار الاخرى.