اتكلمنا عن الـ validation بالتفصيل قبل كدا هنا.
نبدأ نتكلم عن الـ Forms HTML بالتحديد
أكيد قابلت forms كتير وانت أونلاين. يا إما وانت بتسجل حساب (registering an account) على موقع جديد. أو وانت بتملى عنوانك عشان حاجة اشتريتها أونلاين.
كمبرمج (developer)، إنت هتستخدم الـ HTML forms عشان تاخد بيانات من اليوزر (capture user input). إنك تاخد البيانات دي حاجة، بس الأهم إن الـ form تتأكد إن البيانات دي ينفع نستخدمها (usable).
طب إزاي تتأكد إن البيانات اللي اليوزر دخلها دي صح (valid)؟
ليه الـ Form Validation مهم؟ (مثال عملي)
تخيل مثلًا إنك بتعمل موقع لطلب أكل أونلاين (online food delivery website). وجه يوزر وهو بيكتب عنوان التوصيل، كتبه غلط (accidentally makes an error). والـ form بتاعتك قبلت العنوان ده عادي، مع إن المكان ده أصلًا مش موجود.
طبعًا الأكل عمره ما هيوصل! وده هيسبب تجربة وحشة جدًا لليوزر (very bad user experience).
هنا بقى بيجي دور الـ form validation.
إيه هو الـ Form Validation؟
الـ Form validation دي عملية هدفها تتأكد إن البيانات اللي اليوزر دخلها في الـ form مظبوطة (valid). وكمان تكون ماشية مع القواعد (rules) اللي المبرمج (developer) حاططها.
أنواع الـ Form Validation
فيه طريقتين أساسيتين للـ form validation:
- Client-side validation (التحقق من ناحية العميل/المتصفح)
- Server-side validation (التحقق من ناحية السيرفر)
1. Client-Side Validation
- إمتى بيحصل؟ ده بيتشيك على الأغلاط أول ما اليوزر يكتبها في الـ form، يعني قبل ما يدوس Submit أصلًا.
- مين بيعمله؟ الـ web browser نفسه أو كود JavaScript MOC.
- فايدته إيه؟ بيدي لليوزر فيدباك فوري (immediate feedback).
- إزاي بيشتغل؟
- بيبدأ يتشيك هل الـ form اتملت صح ولا لأ.
- لو مفيش أغلاط، الـ form بتتبعت للـ server عشان يتعامل معاها.
- لكن لو فيه أغلاط، بتظهر رسالة خطأ (error message) تنبه اليوزر للبيانات الغلط وإزاي يصلحها عشان الـ submission ينجح.
- مثال: لو استخدمت
<input>والـtype attributeبتاعه كانemail. لو اليوزر مدخلش عنوان إيميل صح (valid email address)، الـ web browser هيطلعله رسالة خطأ يقوله إن اللي كتبه ده مش إيميل مظبوط.
2. Server-Side Validation
- إمتى بيحصل؟ ده بيتشيك على الأغلاط بعد ما البيانات تتبعت وتوصل للـ web server.
- ليه بنحتاجه؟
- آمن أكتر (More secure): لإن الـ client-side validation ممكن حد يتخطاه بسهولة لو بيعرف شوية في الـ development. الـ Server-side بيمنع أي يوزر خبيث (malicious users) إنه يلعب في كود الموقع بتاعك ويبعت بيانات غلط للـ server.
- تشيكات أعقد: الـ Server يقدر يعمل validation لعمليات معقدة أكتر. زي مثلًا يتأكد إن الإيميل ده مش متسجل قبل كده في الـ database، أو يتأكد إن البيانات ماشية مع قواعد البيزنس (business requirements).
- إزاي بيشتغل؟ لما بيانات الـ form توصل للـ web server، الـ backend (الكود اللي شغال على السيرفر) بيعمل validate للبيانات دي الأول قبل ما يبدأ يعالجها (processing it).
الأفضل: نستخدم الاتنين مع بعض!
معظم المواقع بتستخدم الاتنين مع بعض: الـ client-side والـ server-side validation.
- الـ Client-side عشان يدي feedback فوري لليوزرز ويحسن تجربة الاستخدام.
- والـ Server-side عشان يحمي الـ server من أي بيانات خبيثة (malicious data submission) ويضمن سلامة البيانات (data integrity).
إزاي الـ HTML بتساعد في الـ Client-Side Validation؟
الـ HTML نفسها فيها شوية حاجات بتسمحلك تعمل client-side validation بسيط من غير ما تحتاج JavaScript في كل حاجة.
1. استخدام الـ Input Types المناسبة
الـ HTML فيها كذا input types في Forms HTML الـ web browser بيعملهم validation لوحده بناءً على نوعهم. زي:
- الـ
email: لعناوين الإيميل. - الـ
tel: لأرقام التليفونات (التنسيق ممكن يختلف، لكن بيشجع اليوزر يدخل أرقام). - الـ
url: للينكات المواقع (زيhttps://www.example.com). - الـ
date: لاختيار تاريخ. - الـ
time: لاختيار وقت. - الـ
number: للأرقام فقط (ممكن تحدد أقل وأقصى قيمة كمان). - الـ
range: لاختيار رقم في مدى معين (بيظهر كـ slider). - الـ
color: لاختيار لون.
مثال: لو يوزر غلط وهو بيكتب رقم تليفون في خانة الـ type="tel" أو لينك في خانة الـ type="url"، الـ browser هيعمل validate للبيانات دي بناءً على متطلبات الـ input type وهيدي feedback لليوزر لو فيه غلط (زي رسالة بتقول “Please enter a URL”).
2. الـ required Attribute
اتكلمنا عنها في required
ده attribute ممكن تضيفه لأي input عشان توضح إن الخانة دي مطلوبة واليوزر لازم يدخل فيها قيمة وميسيبهاش فاضية.
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>لو اليوزر حاول يعمل submit للـ form وساب الخانة دي فاضية، الـ web browser هينبهه (مثلًا برسالة “Please fill out this field”).
الخلاصة
دي كده كانت أساسيات الـ client-side والـ server-side validation للـ forms. عرفنا ليه هما مهمين وإزاي الـ HTML نفسها بتقدم أدوات تساعد في الـ client-side validation البسيط. هتتعلم أكتر عن إمكانيات الـ validation المتقدمة في الـ HTML (زي الـ pattern attribute والـ min/max attributes) في القراية الجاية.