إليك ما ينبغي معرفته عن التحقّق من صحة النموذج (Form validation) في تجربة المستخدم

تعريف التحقّق من صحة النموذج (Form validation)

يشير مصطلح التحقّق من صحة النموذج إلى ضرورة التأكّد من البيانات والمعلومات التي يتم إضافتها لأي نموذج إلكتروني قبل إرساله. يهدف مصطلح Form validation إلى ضمان صحة البيانات ومنع إدخال أي معلومات خاطئة أو تمثّل تهديداً محتملاً للمواقع الإلكترونية والأعمال التجارية كإدخال أكواد برمجية ضارّة عبر النموذج. بالإضافة إلى أن عملية التحقّق من صحة النموذج مهمة بالنسبة لتجربة المستخدم من حيث توجيه الزائر خلال عملية ملء النماذج وتوضيح الأخطاء مع تزويد المستخدم بكيفية إصلاحها.

طرق وأنواع التحقق من صحة النماذج

توجد طرق عديدة للتحقّق من صحة النماذج الإلكترونية، لكن أكثرها شيوعاً:

• التحقّق قبل الإرسال
• التحقّق بعد الإرسال

1- التحقّق قبل الإرسال (Before Submission Validation)

يُعرف أيضاً باسم التحقّق المباشر (Inline Validation) لأنه يحدث أثناء قيام المستخدم بملء بيانات النموذج. وآلية عمل التحقّق المباشر تكون عبر مراقبة إدخال المستخدم باستمرار. يتم ذلك عادةً باستخدام لغة جافا سكربت JavaScript.

فعندما يكتب المستخدم بيانات في أي حقل من حقول النموذج تبدأ عملية التحقّق من هذا الإدخال وذلك وفقاً لقواعد وأنماط مُحدّدة سلفاً. إذا كان الإدخال صحيحاً فلن يتم تقديم أية تعليقات.

أما إذا كان هناك خطأ في الإدخال، كأن يكتب المستخدم عنوان بريد إلكتروني غير صالح، فإن النظام سيبدأ في إبلاغ المستخدم على الفور بالخطأ ويقدّم له الدعم والمساعدة.

فوائد Before Submission Validation بالنسبة لتجربة المستخدم (UX):

• يمنع المستخدم من إرسال نماذج تتضمّن معلومات خاطئة.
• يقدّم تعليقات وملاحظات فورية للمستخدم مما يضمن له تدارك الخطأ وتصحيحه قبل متابعة ملء النموذج.
• مناسب أكثر في نماذج التحقّق من صحة البريد الإلكتروني، وكلمات المرور، والتواريخ، وأرقام الهواتف.

ورغم ذلك.. هذا النوع من التحقّق لا يمتلك القدرة على التعامل مع عمليات التحقّق الأكثر تعقيداً مثل التحقّق من التعليمات البرمجية الخبيثة في النماذج.

2- التحقّق بعد الإرسال (After Submission Validation)

بمجرد انتهاء المستخدم من ملء وإرسال النموذج تبدأ عمليات التحقّق ومعالجة بيانات النموذج، ويتم ذلك عادةً باستخدام لغة برمجة مثل PHP أو Python.

يتم فحص النموذج بأكمله للتحقّق من وجود أية أخطاء أو معلومات غير صحيحة. إذا اكتشف النظام وجود مشكلة فإنه يولّد رسائل خطأ للمستخدم، وعليه ينبغي على المستخدم إجراء التصحيح المناسب وإعادة إرسال النموذج مرة أخرى.

فوائد هذا النوع من التحقّق:

• أكثر أمانًا من التحقّق المباشر.
• يمكنه التحقق من البيانات المعقدة، مثل الملفات المُرفقة أو حقن التعليمات البرمجية.
• يمكنه التكامل مع أنظمة أخرى، مثل قواعد البيانات (databases) أو عمليات الدفع (payment processors).

إلا أنه يقدّم تجربة مستخدم سيئة. إذ يؤدي إلى حدوث تأخير في عملية إرسال النموذج، فالمستخدم لا يمكنه معرفة الخطأ إلا بعد الضغط على زر الإرسال. كما أنه في حالة وجود خطأ يضطّر المستخدم لإعادة ملء البيانات وإرسال النموذج مرة أخرى، وهذا قد يسبّب إحباط كبير لديه خاصةً إذا كان النموذج طويلاً.

ما هي أفضل طريقة للتحقّق من صحة النماذج؟

أيهما أفضل؟ التحقّق قبل الإرسال أم التحقّق بعده؟

حسناً، هذا يعتمد على الهدف من النموذج، والأخذ بالاعتبار مميزات وعيوب كلا الطريقتين، لكن بشكل عام:

✅ استخدم التحقّق قبل الإرسال في نماذج الويب مثل:

• نماذج التسجيل (sign-ups)
• الاشتراكات (subscriptions)
• توليد العملاء المحتملين (lead generation)

وغيرها من النماذج المشابهة.

✅ استخدم التحقّق بعد الإرسال في النماذج المتعلّقة بصفحات الدفع والتي يجب فيها توفير قدر أكبر من الأمان والخصوصية حتى لو كان ذلك على حساب تجربة المستخدم.

أفضل الممارسات والنصائح للتحقق من صحة النماذج (form validation best practices)

بغض النظر عن نوع التحقّق من صحة النموذج الذي تختاره، ضع في اعتبارك هذه النصائح والممارسات:

• تجنّب طلب معلومات كثيرة من المستخدم وإطالة النموذج بلا داعي.
• اكتب رسائل خطأ فعالة، سهلة الفهم تشرح للمستخدم بوضوح ما ينبغي عليه فعله لإصلاح الخطأ.
• في حال كنت تستخدم اختبار CAPTCHA فاختر طريقة سهلة الاستخدام بعيدة عن التعقيد.
• اجعل النماذج التي تعمل عليها متوافقة مع الأجهزة المحمولة والهواتف الذكية لكثرة المستخدمين الذين يتصفحون الإنترنت من خلالها.
• اختبر التحقّق من صحة النموذج بدقة قبل إتاحته للمستخدمين.

🎯 للتعرّف على المزيد من أشهر المصطلحات في تجربة المستخدم، يمكنك زيارة مرجع المصطلحات المجاني الذي نقدّمه في منصة UX Writing بالعربية.