Making the most of client-side validation with HTML

أكيد حصلت معاك قبل كده، تملى فورم أونلاين وتدوس على زرار الـ submit، وفجأة تلاقي خانة أو أكتر بقى لونها أحمر.

فيه أسباب كتير لرسائل الأخطاء دي في الفورمات الأونلاين:

• ممكن يكون الـ format غلط.
• أو ساعات بيحصل إيرور لما تكون خانة فاضية.
• أو لو القيمة اللي دخلتها طويلة أوي أو قصيرة أوي.

كمبرمج (developer)، أنت ممكن تستخدم HTML و CSS عشان توجه المستخدمين إنهم يدخلوا البيانات صح في الفورمات. وبالطريقة دي، توفر موارد الـ web server.

في المقال ده، هنعرف أكتر عن قدرات الـ client-side validation في الـ HTML وإزاي تستخدم CSS عشان تنبه المستخدمين بشكل فعال لما البيانات تكون غلط.

أهمية الـ Client-Side Validation

اتكلمنا قبل كدا عن الـ 1. Client-Side Validation.

لحد دلوقتي، أنت عرفت عن أنواع الـ Input Types HTML المختلفة في HTML وإزاي بيتأكدوا من صحة الـ format بتاع البيانات. بس فيه attributes تانية ممكن تضيفها للـ elements عشان تعمل validation أكتر.

إزاي تتأكد إن المستخدم دخل بيانات؟ (الـ required attribute)

اتكلمنا عنها في الـ [[Input Types HTML#required|required]]

خلينا نشوف الأول إزاي تضمن إن المستخدم لازم يدخل قيمة في خانة معينة في الفورم.

ده مثال لفورم تسجيل دخول (log-in form) فيها خانتين:

1. واحدة للـ username.
2. واحدة للـ password. وكمان فيها زرار submit عشان تبعت الفورم.

لو المستخدم مدخلش username أو password وداس على زرار الـ “Submit”، المتصفح (browser) هيسمح للفورم تتبعت للـ web server.

بس ده يعتبر إهدار لموارد السيرفر. ليه؟ لأن حتى لو الـ server-side validation اكتشف المعلومات الناقصة ومنع معالجة الطلب، فيه HTTP request اتبعت خلاص للسيرفر.

خلينا نحسن الفورم دي باستخدام الـ client-side validation عشان نضمن إن المستخدم يدخل قيم في الخانتين.

دلوقتي، مع وجود الـ required attribute في الكود:

• لو فيه خانة فاضية والمستخدم داس submit.
• الـ request مش هيتبعت للـ web server.
• المتصفح هيركز على أول input element فاضي ويبلغ المستخدم إن فيه خانة فاضية.

كده الفورم بتقدم تجربة مستخدم (user experience) أحسن بكتير وبتمنع الاستخدام غير الضروري لموارد الـ web server.

تحديد طول البيانات المدخلة (الـ minlength و maxlength attributes)

اتكلمنا عنها في الـ [[Input Types HTML#maxlength-و-minlength|maxlength و minlength]]

بس مشكلة تانية ممكن تسبب إهدار للموارد هي لو المستخدم دخل بيانات قصيرة أوي أو طويلة أوي عن المطلوب. ده برضه هيسبب إرسال طلبات غير ضرورية للـ web server.

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

• مثلاً، لو عايز الـ usernames تكون على الأقل 3 حروف وبحد أقصى 12 حرف.
• أو يمكن عايز تضمن passwords آمنة أكتر بإنك تطلب حد أدنى لطول الباسورد يكون 5 حروف.

لحسن الحظ، فيه اتنين attributes كمان ممكن تستخدمهم عشان تضمن الطول الصحيح للبيانات:

1. minlength attribute
2. maxlength attribute

ممكن تضيف الـ attributes دي للخانات عشان تحدد الطول المطلوب. في المثال بتاعنا، بما إن أقل قيمة للـ username متظبطة على 3، لو دخلت حرفين بس ده هيكون غير صالح (invalid).

لو دوست submit دلوقتي، المتصفح هيبلغك بمتطلبات الطول. فيه function مدمجة في المتصفح هي اللي بتطلع الرسالة اللي بتظهر على الشاشة.

مرة تانية، ده بيحسن تجربة المستخدم وبيحافظ على موارد الـ web server.

إزاي تظهر الإيرور بشكل واضح للمستخدم؟ (استخدام الـ CSS)

دلوقتي خلينا نركز على الطريقة اللي المتصفح بيوصل بيها الأخطاء للمستخدمين، زي إن خانة في الفورم يبقى لونها أحمر لما البيانات تكون مش صح (invalid).

الموضوع ده ممكن يتنفذ بسهولة باستخدام CSS.

عشان تخلي خانة معينة لونها أحمر لما البيانات تكون invalid:

1. بتستخدم الـ input element selector.
2. بعدين بتطبق عليه Pseudo Classes CSS اسمه invalid. (هتعرف أكتر عن الـ pseudo-class selectors بعدين في الكورس ده. المهم تعرف دلوقتي إنهم بيستخدموا عشان تختار elements بناءً على حالتها، زي مثلاً إذا كانت البيانات المدخلة valid أو invalid).
3. بعدين بتضيف CSS property عشان تخلي الـ border بتاع الـ element لونه أحمر.

input:invalid {
  /* Set the border of the element to red */
  border: 1px solid red;
}

المشكلة: كله أحمر من الأول!

بس فيه مشكلة صغيرة. لما الفورم بتحمل في الأول، كل الخانات المطلوبة (required) بتكون فاضية، وبالتالي حالتها تعتبر invalid.

ده هيخلي كل الخانات دي تظهر باللون الأحمر من أول ما الصفحة تفتح، زي ما باين في المثال ده من شاشة تسجيل دخول حقيقية.

الأحسن طبعًا إن الخانات تظهر باللون الأحمر بس لما المستخدم يبدأ يدخل بيانات وتكون البيانات دي invalid.

الحل: استخدام الـ :focus pseudo-class

عشان تعمل كده، محتاج تطبق pseudo-class تانية اسمها focus.

الـ focus pseudo-class دي بتتأكد إذا كان المستخدم حاليًا بيدخل بيانات في الخانة دي ولا لأ.

input:focus:invalid {
  /* Set the border to red only when focused and invalid */
  border: 1px solid red;
}

دلوقتي:

• الفورم هتظهر طبيعية لما الصفحة تحمل لأول مرة.
• ولما المستخدم يبدأ يدخل بيانات، الخانة هيبقى لونها أحمر فقط لو البيانات اللي دخلت invalid.