< غير ذلك > كود جي كويري للتحقق من أي قيمة بداخل المربع قبل إرسال بياناته للقاعدة (كجعله مطلوب...

السلام عليكم و رحمة الله

قبل البدء بالشرح سأخبركم بروعة هذا الكود و ما يقوم به :
هذا الكود يقوم بالتحقق من عدة أمور قبل إرسال البيانات إلى قاعدة البيانات يعني بمجرد ما يضغط المستخدم أرسل أو موافق المهم الزر سيتم التحقق من جميع الصناديق التي لديك في الفورم و يظهر رسالة خطأ للمستخدم مثلا بأن هذا الصندوق مطلوب و أنت لم تدخل قيمة أو بأن هذا الصندوق يجب إداخل فيه رابط و أنت لم تدخل رابط أو يحتاج إلى رقم و أنت أدخلت نص .. إلخ.
فهو سيفور الضغط و يتم تنفيذه بشكل سريع
سنتناولها بالأسفل بالترتيب سأشرح 3 خطوات لتفهم كل شئ

الأمر بسيط جداً لأنك بعد هيك ستضيف اسم الكلاس لأي مربع تريد التعديل عليه و سيصبح فعال بالأمر الذي أدخلته

الخطوة الأولى
حمل الملف المرفق أو إضغط هنا للتحميل وبعدها تعملوا فك ضغط فَينتُج مجلد أصفر اسمه validation
هذا المجلد بداخله عدة مجلدات و ملفات ما إلنا أي دخل بها (ربما صحيح بها ملفات زيادة لأني استخرجتها من ملفات سكربت ولم أكن دقيق إلا أنها لا تؤثر عليك بشئ فحجمها لا يتجاوز بضع كيلوات هذا الكلام اقوله علشان ما أحد يجي يذكر هذا الخطأ لي المهم انسى هذا الكلام و تابع معي ) فقط إلى عليك هو ترفع المجلد الأصفر كما هو من الخارج يعني مجلد validation ترفعه داخل مشروعك

هذه الخطوة الأولى اعتقد ما فيها أي صعوبة انك تنزل المرفق و تفك ضغطه و ترفع المجلد الناتج من فك الضغط داخل مشروعك .

الخطوة الثانية
إضافة الكود التالي في ملف الهيدر الخاص بمشروعك أو إلى عنده صفحة وحدة لازم يكون داخل وسم
هنا
الكود الذي ستضيفه داخل وسم الهيد هو
رمز Code:



.warning { color: red; }







أعيد و أكرر أنه يجب أن يكون داخل وسم الهيد

الخطوة الثالثة و الأخيرة

1- نريد أن نتحقق بأن القيمة المدخلة مطلوبة فلا يمكن تنفيذ الأمر إلا بعد أن يقوم المستدخم بإدخال قيمة داخل الصندوق فهو بعد أن يضغط على موافق لن يتم تنفيذ الأمر بل سيذهب المؤشر للصندوق و يخبره رسالة بأن الملف مطلوب و يعلمه بالأحمر
ولعمل هذا نستخدم الكلاس التالية
رمز Code:

طبعا name="name" تغيره بما يناسبك مش تتركه كما هو بل لازم يكون حسب اسم الصندوق الخاص بيك كتبتها هنا حتى لا تنساه

الكلام الي داخل title و هو باللون الأخضر هو الكلام الذي سوف يظهر للزائر إذا لم يدخل القيمة في الصندوق و كما يمكن حذفها بالكامل أي حذف رمز Code:
title="This field is required!"
لتظهر الرسالة التلقائية المكتوبة في كود الجي كويري و أعتقد أنها نفسها
المهم هو class="required" / فهو الذي قام بكل العمل لدينا ف required تقوم بجعل الصندوق مطلوب ولا يمكن تنفيذ الأمر إلا بعد ادخال قيمة بداخله

2- التحقق من الإيميل نفس الكود السابق لكن داخل الكلاس نكتب بدل required كلمة email
طبعاً هذه الكلمة مش عشوائية بل هي مكتوبة في الملفات الي رفعتها من المرفقات لتستخدم ككلاس
يعني لو انت مش رافع الملفات ولا كأنك عملت حاجة بكتابتها

3- التحقق من أن المدخل عبارة عن رابط ندخل بدل كلمة required نكتب بدالها url
4- التحقق من أن المدخل عبارة عن تاريخ ندخل بدل كلمة required نكتب بدالها date
5- التحقق من أن المدخل رقم وليس نص و أحرف ندخل بدل كلمة required نكتب بدالها number
6- جعل الصندوق مطلوب و التحقق من أن القيمة رقم يعني لو دخل قيمة غير رقمية سيكون حقق الشرط الأول وهي بأنه دخل قيمة فانتهينا من حكاية المطلوب لكنه لن يتم التنفيذ لأن القيمة غير رقمية لتنفيذها ندخل بدل كلمة required نكتب بدالها ReqNumber

7- التحقق من أن المدخل عبارة عن رقم فيزا كرت ندخل بدل كلمة required نكتب بدالها creditcard

وهنا بعض الكلاسات التي لا أعرف لماذا هي لكن يمكن استخدامها و تجربتها بنفسك فقط أبدلها بدل required في الكود السابق و ستعمل معك
dateISO , dateDE , numberDE , digits




و أخيراً لا تنسوا ال title فعند استخدامك أي شئ مما سبق يجب تغير الرسالة التي ستظهر للمستخدم و ذلك من خلال استبدال النص الأخضر بما تراه مناسب أو حذف كامل ال title مع النص طبعا و ستظهر الرسالة الديفلت أي المعرفة مسبقاً

------------

للمتقدمين في الإستخدام و يريد إضافة كلاسات و استخدامها كل ما عيك هو الدخول إلى المجلد الأصفر jquery-validate و فتح الملف jquery.validate.js
و الذهاب من السطر 727 إلى سطر 739 يمكنك إضافة كلاسات بداخلها و تستخدمها
مثال إقرأ رقم 6 من أعلى فأنا كتبتها و هي جعل الصندوق مطلوب و التحقق من أن المدخل رقم فقط
ستجده في السطر 734
رمز Code:
ReqNumber: {required: true , number: true},