مساعدة المستخدمين على إدخال البيانات الصحيحة في النماذج

تحتوي المتصفِّحات على ميزات مدمَجة للتحقّق من إدخال المستخدمِين البيانات بالتنسيق الصحيح. يمكنك تفعيل هذه الميزات باستخدام العناصر والسمات الصحيحة. بالإضافة إلى ذلك، يمكنك تحسين عملية التحقّق من صحة النماذج باستخدام CSS وJavaScript.

لماذا عليك التحقّق من صحة النماذج؟

لقد تعلمت في الوحدة السابقة كيفية مساعدة المستخدمين على تجنّب الاضطرار إلى إعادة إدخال المعلومات في النماذج بشكل متكرر. كيف يمكنك مساعدة المستخدمين في إدخال بيانات صالحة؟

يزعجك ملء نموذج بدون معرفة الحقول المطلوبة أو قيود هذه الحقول. على سبيل المثال، يمكنك إدخال اسم مستخدم وإرسال نموذج — فقط لمعرفة أن أسماء المستخدمين يجب أن تحتوي على ثمانية أحرف على الأقل.

يمكنك مساعدة المستخدمين في ذلك من خلال تحديد قواعد التحقق وإبلاغها.

مساعدة المستخدمين في تجنُّب الحقول المطلوبة المفقودة عن طريق الخطأ

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

حاوِل إرسال هذا النموذج بدون إدخال أي بيانات. هل تظهر رسالة خطأ مرفقة مع "<input>" تفيد بأنّ الحقل مطلوب؟

ويحدث ذلك بسبب السمة required.

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

لقد سبق أن تعلمت أنّه يمكنك استخدام العديد من الأنواع الأخرى، على سبيل المثال type="email". لنلقِ نظرة على عنوان البريد الإلكتروني المطلوب <input>.

حاوِل إرسال هذا النموذج بدون إدخال أي بيانات. هل هناك أي اختلاف عن العرض التوضيحي السابق؟ أدخل اسمك الآن في حقل البريد الإلكتروني وحاول الإرسال. إذا ظهرت لك رسالة خطأ مختلفة. كيف يمكن حدوث ذلك؟ وصلتك رسالة مختلفة لأنّ القيمة التي أدخلتها ليست عنوان بريد إلكتروني صالحًا.

تُعلم السمة required المتصفّح بأنّ الحقل إلزامي. يختبر المتصفّح أيضًا ما إذا كانت البيانات التي تم إدخالها تتطابق مع تنسيق type. لا يكون حقل البريد الإلكتروني المعروض في المثال صالحًا إلا إذا لم يكن فارغًا وإذا كانت البيانات التي تم إدخالها عنوان بريد إلكتروني صالحًا.

ساعِد المستخدم على إدخال التنسيق الصحيح.

لقد تعلمت كيفية جعل أحد الحقول إلزاميًا. كيف يمكنك إرشاد المتصفح بضرورة إدخال ثمانية أحرف على الأقل في حقل النموذج؟

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

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">

الإبلاغ عن قواعد التحقّق

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

تأكَّد من أنّ جميع المستخدمين يفهمون قواعد التحقّق. ولإجراء ذلك، عليك ربط عنصر التحكّم في النموذج بعنصر يوضّح القواعد. ولإجراء ذلك، أضِف السمة aria-describedby إلى العنصر الذي يتضمّن id الخاصة بالنموذج.

سمة النمط

قد تحتاج أحيانًا إلى تحديد قواعد أكثر تقدّمًا للتحقّق من الصحة. مرة أخرى، يمكنك استخدام سمة HTML. ويسمّى pattern، ويمكنك تحديد تعبير عادي على أنّه القيمة.

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

وهنا، يُسمح فقط بالأحرف الصغيرة؛ يجب على المستخدم إدخال حرفين على الأقل، وليس أكثر من عشرين.

كيف يمكنك تغيير pattern للسماح أيضًا بالأحرف الكبيرة؟ جرِّبه الآن.

إضافة أنماط

لقد تعلمت الآن كيفية إضافة التحقق من الصحة في HTML. ألن يكون جيدًا أن تتمكن من تصميم عناصر التحكم في النماذج استنادًا إلى حالة التحقق من الصحة؟ هذا ممكن باستخدام CSS.

كيفية تصميم حقل نموذج مطلوب

وضِّح للمستخدم أنّ الحقل إلزامي قبل أن يتفاعل مع النموذج.

يمكنك تصميم حقول required باستخدام الفئة الزائفة في CSS :required.

input:required {
  border: 2px solid;
}

عناصر تحكم النموذج غير صالحة للنمط

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

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

هناك المزيد من الطرق لتعديل أنماطك استنادًا إلى عمليات التحقّق من الصحة. في الوحدة التي تتناول CSS، ستتعرف على المزيد من المعلومات حول نماذج الأنماط.

التحقّق باستخدام JavaScript

لتحسين عملية التحقّق من صحة النماذج، يمكنك استخدام واجهة برمجة التطبيقات للتحقّق من صحة قيود JavaScript.

تقديم رسائل خطأ مفيدة

لقد عرفت من قبل أن رسائل الخطأ غير متطابقة في كل متصفح. كيف يمكنك عرض الرسالة نفسها للجميع؟

لتحقيق ذلك، استخدِم طريقة setCustomValidity() في Constraint حسابكِ API. لنرى كيف يعمل ذلك.

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

يمكنك إجراء طلب بحث عن العنصر الذي تريد ضبط رسالة الخطأ المخصّصة فيه. استمع إلى حدث invalid للعنصر المحدّد. في هذه الصفحة، تم إعداد الرسالة باستخدام "setCustomValidity()". يعرض هذا المثال الرسالة Please enter your name. إذا كان الإدخال غير صالح.

افتح العرض التوضيحي في متصفحات مختلفة، ومن المفترض أن ترى الرسالة نفسها في كل مكان. والآن، حاول إزالة JavaScript وحاول مرة أخرى. ستظهر لك رسائل الخطأ التلقائية مرة أخرى.

هناك المزيد الذي يمكنك فعله باستخدام Constraint حسابكِ API. ويمكنك الاطّلاع على نظرة تفصيلية على استخدام التحقّق باستخدام JavaScript في وحدة لاحقة.

كيفية التحقّق من الصحة في الوقت الفعلي يمكنك إضافة عملية تحقّق في الوقت الفعلي في JavaScript من خلال الاستماع إلى حدث onblur لعنصر تحكّم في نموذج، والتحقّق من صحة الإدخال على الفور عندما يغادر المستخدم حقل نموذج.

انقر على حقل النموذج في العرض التوضيحي، وأدخِل "الويب"، ثم انقر على مكان آخر في الصفحة. ستظهر لك رسالة الخطأ الأصلية لـ minlength أسفل حقل النموذج.

تعرَّف على مزيد من المعلومات حول تنفيذ التحقق في الوقت الفعلي باستخدام JavaScript في وحدة قادمة.

التحقّق من استيعابك

اختبر معلوماتك حول التحقق من صحة النماذج

المراجِع

• إيقاف زر الدفع بعد إرسال النموذج
• إضافة CSS لتحسين عمل النموذج