[ درس ] [للمبتدئين] التأكد من الحقول قبل ارسالها Client side validation using jQuery

عادة فى العديد من المواقع بتلاقى وانت بتسجل فيها او فى فورم اتصل بنا مثلا ان وانت بتكتب تطلعلك رسايل ان الحقل ده مطلوب او ان الايميل اللى كتبته غير صحيح وما الى ذلك.

مثال:



فى هذا الدرس سنقوم باستخدام المكتبة الشهيرة jQuery للتأكد من الinput اللى المستخدم كتبه فى الفورم قبل ارساله للسيرفر. طبعا يجب التأكيد على ان التأكد ده لا يغنى عن التأكد والvalidation اللى لازم يبقى موجود فى الكود بتاع السكربت بتاعك (php مثلا) على السيرفر.

فى الدرس ده هنستخدم Plugin جاهز صفحته الرئيسية :
bassistance.de » jQuery plugin: Validation

ورابط التحميل مباشرة:
http://jquery.bassistance.de/validat...tion-1.8.1.zip

بعد فك الضغط هتلاقى المجلد بالمنظر ده



اولا: الملفات اللى هنحتاجها هى:

- من الفولدر الرئيسى:
jquery.validate.js

- من فولدر lib:
jquery.js

- من فولدر demo:
-- افتح فولدر css:
cmxform.css

قم بنقل الملفات دى فى فولدر لوحده عشان نشتغل عليها (فى المرفقات المثال كامل) بحيث يبقى المنظر ده قدامك:



ثانيا: لازم يبقى عندنا صفحة HTML موجود فيها الفورم اللى هنشتغل عليها .. مثال:

رمز PHP:

jQuery Validation




اسم المستخدم


كلمة المرور


تأكيد كلمة المرور


البريد الالكترونى

قم بحفظ الكود ده فى ملف html فى نفس فولدر الملفات.

ثالثا: بما اننا هنستخدم الjQuery فلازم ندخلها معانا فى الصفحة .. وكمان احنا مش بس هنستخدم الjQuery ده كمان فى plugin اللى احنا نزلناه ده هنستخدمه .. يبقى لازم نقول للصفحة اننا هنستخدم الملفين دول .. يبقى قم بادخال السطرين دول فى الhead بتاع الصفحة

رمز PHP:

jQuery Validation








اسم المستخدم



كلمة المرور



تأكيد كلمة المرور



البريد الالكترونى

رابعا: عايزين نحدد التعليمات .. يعنى مثلا الحقل الفلانى لمطلوب والحقل العلانى لازم يبقى ايميل .. الخ

علشان نعمل كده لازم الاول نستنى لما الصفحة تبقى جاهزة او يتم تحميلها عشان نتأكد ان كل الملفات المطلوبة موجودة .. فى الhead عندك هتزود:

رمز PHP:

jQuery Validation

طيب .. لاحظ فى الفورم اللى فى المثال الاتى:

- الفورم ليها id هو my_form
- كل حقل ليه id وname

دلوقتى عايزين نقول لما الصفحة تبقى جاهزة .. الفورم اللى بنعرفها من الid (حاجة زى بطاقة الرقم القومى) هنطبق عليها التعليمات بتاعتنا .. فهنكتب الاتى:

رمز PHP:

$(document).ready(function() {
$('#my_form').validate();
});

لاحظ اننا كتبنا الid بتاع الفورم قبليه علامة #.

كده احنا قلنا ان الفورم بتاعتنا دى هنطبق عليها validation قبل ما نبعتها للسيرفر .. طيب .. ايه هى بقى التعليمات او الrules بتاعت الvalidation ده؟

عشان نكتب التعليمات هنفتح قوسين جوه كلمة validate تبقى كده

رمز PHP:

$(document).ready(function() {
$('#my_form').validate({

//التعليمات

});
});

تعليمات بالانجليزى يعنى rules .. فهنقوله الrules بتاعتنا .. هناك العديد من التعليمات منها:

required يعنى مطلوب
minlength يعنى على الاقل عدد الحروف يبقى 5 مثلا
email يعنى لازم الحقل يتكتب فى ايميل
equalTo لازم الحقل يبقى بيساوى حقل تانى (زى مثلا الباسوورد وتأكيد الباسوورد)

القائمة كاملة موجودة هنا:
Plugins/Validation - jQuery JavaScript Library

طريقة كتابة التعليمات:

اتفقنا ان كل حقل ليه id وname .. احنا فى تعليمات هنكتب كده

رمز PHP:

name:{
rule_1: true,
rule_2: true
}

مع استبدال rule_1 و2 باى واحد من الليست الموجودة فوق .. المثال يصبح كالتالى:

رمز PHP:

$(document).ready(function() {
$('#my_form').validate({

//التعليمات
rules:{
username:{
required: true,
minlength: 4
},
pass:{
required: true
},
confirm_pass:{
required: true,
equalTo: '#id_pass'
},
email:{
required: true,
email: true
}
}
});
});

ملاحظات:

- استخدمنا الname لتحديد التعليمات بتاعتنا
- minLength: 4 يعنى الحقل ده لازم يبقى على الاقل 4 حروف
- required يعنى الحقل ده مطلوب
- equalTo تستخدم فى تأكيد الباسوورد وهى تأخذ علامة ال# متبوعة بالid الخاص بالحقل الاخر .. يعنى عندنا الباسوورد الid بتاعه id_pass يبقى احنا عايزين الconfirm_pass يبقى بيساوى ال#id_pass

طيب لو جربنا ودوسنا على تسجيل هنلاقى الرسالة اللى طلعت بالانجليزى



عايزين بقى نحولها لعربى .. من مميزات الPlugin ده انك زى ما كتبت التعليمات بتاعتك ممكن كمان تكتب الرسائل اللى عايزها تظهر للمستخدم .. ازاى، نفس طريقة كتابة التعليمات بس هنشيل rules ونخليها رسائل بالانجليزى يعنى messages ونبتدى نكتب:

رمز PHP:

messages:{
username:{
required: "مطلوب",
minlength: "على الاقل 4 حروف"
},
pass:{
required: "مطلوب",
},
confirm_pass:{
required: "مطلوب",
equalTo: "يجب ان تكتب نفس الباسوورد مرة اخرى"
},
email:{
required: "مطلوب",
email: "برجاء كتابة ايميل صحيح"
},
}

ويصبح الكود النهائى:

رمز PHP:

$(document).ready(function() {
$("#my_form").validate({
rules:{
username:{
required: true,
minlength: 4
},
pass:{
required: true
},
confirm_pass:{
required: true,
equalTo: '#id_pass'
},
email:{
required: true,
email: true
}
},
messages:{
username:{
required: "مطلوب",
minlength: "على الاقل 4 حروف"
},
pass:{
required: "مطلوب",
},
confirm_pass:{
required: "مطلوب",
equalTo: "يجب ان تكتب نفس الباسوورد مرة اخرى"
},
email:{
required: "مطلوب",
email: "برجاء كتابة ايميل صحيح"
},
}
});
});

ملحوظة: متنساش ال, اللى قبل كلمة messages يعنى يبقى الكود كده مثلا

رمز PHP:

rules:{
//التعليمات
}, //الفصلة
messages{
//الرسائل
}

اخيرا:



علشان الشكل يبقى كويس ممكن تعمل ملف css خاص بك .. فى هذا المثال سأقوم باضافة ملف الcss الى اخدناه فى اول الدرس حطيناه فى الفولدر

رمز PHP:

وفى الفورم نزود كلاس

رمز PHP:

اسم المستخدم


كلمة المرور


تأكيد كلمة المرور


البريد الالكترونى

وكده يبقى عندنا نفس الفورم الموجودة فى المثال فى اول الدرس




اخر حاجة خالص:

- الplugin ليه طريقة استخدام تانية سهلة

فى الhead ممكن تكتب

رمز PHP:

$('#my_form').validate();

وتكتب التعليمات فى حقول الادخال نفسها مثال

رمز PHP:

لكن ميزة الطريقة المشروحة فى الدرس ان كود الHtml بتاعك هيفضل "نضيف" وكود الجافاسكريبت هيفضل فى مكان لوحده وده اسهل واحسن لمعظم الناس.

- المثال فى المرفقات -

الملفات المرفقة traidnt.zip (45.4 كيلوبايت)







أكثر...