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

تحتوي المتصفحات على ميزات مضمنة للتحقق من أن المستخدمين قد أدخلوا البيانات بالتنسيق الصحيح. يمكنك تفعيل هذه الميزات باستخدام العناصر والسمات الصحيحة. بالإضافة إلى ذلك، يمكنك تحسين التحقق من صحة النماذج باستخدام 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 Constraint Validation API.

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

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

لتحقيق ذلك، استخدم دالة sort_values setCustomValidity() لواجهة برمجة تطبيقات التحقق من صحة القيد. لنرى كيف يعمل ذلك.

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

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

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

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

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

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

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

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

التحقق من فهمك

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

الموارد

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