admin
11-01-2013, بتوقيت غرينيتش 04:07 PM
http://www.dzbatna.com/images/icons/smile.gif ظƒظˆط¯ ط¬ظٹ ظƒظˆظٹط±ظٹ ظ„ظ„طھط*ظ‚ظ‚ ظ…ظ† ط£ظٹ ظ‚ظٹظ…ط© ط¨ط¯ط§ط®ظ„ ط§ظ„ظ…ط±ط¨ط¹ ظ‚ط¨ظ„ ط¥ط±ط³ط§ظ„ ط¨ظٹط§ظ†ط§طھظ‡ ظ„ظ„ظ‚ط§ط¹ط¯ط© (ظƒط¬ط¹ظ„ظ‡ ظ…ط·ظ„ظˆط¨... (http://www.dzbatna.com/t1932441/)
السلام عليكم و رحمة الله
قبل البدء بالشرح طريقة سأخبركم بروعة هذا الكود code و ما يقوم به :
هذا الكود code يقوم بالتحقق من عدة أمور قبل إرسال البيانات إلى قاعدة البيانات يعني بمجرد ما يضغط المستخدم أرسل أو موافق المهم الزر سيتم التحقق من جميع الصناديق التي لديك في الفورم و يظهر رسالة خطأ للمستخدم مثلا بأن هذا الصندوق مطلوب و أنت لم تدخل قيمة أو بأن هذا الصندوق يجب إداخل فيه رابط و أنت لم تدخل رابط أو يحتاج إلى رقم و أنت أدخلت نص .. إلخ.
فهو سيفور الضغط و يتم تنفيذه بشكل سريع
سنتناولها بالأسفل بالترتيب سأشرح طريقة 3 خطوات لتفهم كل شئ
الأمر بسيط جداً لأنك بعد هيك ستضيف اسم الكلاس لأي مربع تريد التعديل عليه و سيصبح فعال بالأمر الذي أدخلته
الخطوة الأولى
حمل الملف المرفق أو إضغط هنا للتحميل (http://www.megaupload.com/?d=GUYHDK0I) وبعدها تعملوا فك ضغط فَينتُج مجلد أصفر اسمه validation
هذا المجلد بداخله عدة مجلدات و ملفات ما إلنا أي دخل بها (ربما صحيح بها ملفات زيادة لأني استخرجتها من ملفات سكربت ولم أكن دقيق إلا أنها لا تؤثر عليك بشئ فحجمها لا يتجاوز بضع كيلوات هذا الكلام اقوله علشان ما أحد يجي يذكر هذا الخطأ لي المهم انسى هذا الكلام و تابع معي ) فقط إلى عليك هو ترفع المجلد الأصفر كما هو من الخارج يعني مجلد validation ترفعه داخل مشروعك
هذه الخطوة الأولى اعتقد ما فيها أي صعوبة انك تنزل المرفق و تفك ضغطه و ترفع المجلد الناتج من فك الضغط داخل مشروعك .
الخطوة الثانية
إضافة الكود code التالي في ملف الهيدر header الخاص بمشروعك أو إلى عنده صفحة وحدة لازم يكون داخل وسم
<head>هنا</head>
الكود code الذي ستضيفه داخل وسم الهيد هو
رمز Code:
<!-- // http://www.iugstu.com // to use jquery files and validate any thinges ((this is class -*-*->:: required,email,url,date,dateISO,dateDE,ReqNumber,n umber,numberDE,digits,creditcard,)) \\\ --> <link rel="stylesheet" type="text/css" media="screen" href="validation/css/screen.css" /> <style type="text/css"> .warning { color: red; } </style> <script src="validation/lib/jquery.js" type="text/javascript"></script> <script src="validation/lib/jquery.form.js" type="text/javascript"></script> <script src="validation/jquery.validate.js" type="text/javascript"></script> <script src="validation/js/cmxforms.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function() { // show a simple loading indicator var loader = jQuery('<div id="loader"><img src="images/loading.gif" alt="loading..." /></div>') .css({position: "relative", top: "1em", left: "25em"}) .appendTo("body") .hide(); jQuery().ajaxStart(function() { loader.show(); }).ajaxStop(function() { loader.hide(); }).ajaxError(function(a, b, e) { throw e; }); var v = jQuery("#form").validate({ submitHandler: function(form) { jQuery(form).ajaxSubmit({ target: "#result" }); } }); jQuery("#reset").click(function() { v.resetForm(); }); }); </script>
أعيد و أكرر أنه يجب أن يكون داخل وسم الهيد
الخطوة الثالثة و الأخيرة
1- نريد أن نتحقق بأن القيمة المدخلة بالصندوق موجودة فعلا يعني جعل الصندوق مطلوب ادخال القيمه فيه ولا يمكن تركه فارغ فبعد الضغط على زر ارسال لن يتم تنفيذ الأمر بل سيذهب المؤشر للصندوق و يخبره رسالة بأن الصندوق مطلوب و يعلمه بالأحمر هذا في حال أن المستخدم تركه فارغ
ولعمل هذا نستخدم الكلاس التالية
رمز Code:
<input type="text" title="This field is required!" class="required" name="name">
طبعا name="name" تغيره بما يناسبك مش تتركه كما هو بل لازم يكون حسب اسم الصندوق الخاص بيك كتبتها هنا حتى لا تنساه
الكلام الي داخل title و هو باللون الأخضر هو الكلام الذي سوف يظهر للزائر إذا لم يدخل القيمة في الصندوق و كما يمكن حذفها بالكامل أي حذف رمز Code:
title="This field is required!"
لتظهر الرسالة التلقائية المكتوبة في كود code الجي كويري و أعتقد أنها نفسها
المهم هو class="required" / فهو الذي قام بكل العمل لدينا ف required تقوم بجعل الصندوق مطلوب ولا يمكن تنفيذ الأمر إلا بعد ادخال قيمة بداخله
2- التحقق من الإيميل نفس الكود code السابق لكن داخل الكلاس نكتب بدل required كلمة email
طبعاً هذه الكلمة مش عشوائية بل هي مكتوبة في الملفات الي رفعتها من المرفقات لتستخدم ككلاس
يعني لو انت مش رافع الملفات ولا كأنك عملت حاجة بكتابتها
3- التحقق من أن المدخل عبارة عن رابط ندخل بدل كلمة required نكتب بدالها url
4- التحقق من أن المدخل عبارة عن تاريخ ندخل بدل كلمة required نكتب بدالها date
5- التحقق من أن المدخل رقم وليس نص و أحرف ندخل بدل كلمة required نكتب بدالها number
6- جعل الصندوق مطلوب و التحقق من أن القيمة رقم يعني لو دخل قيمة غير رقمية سيكون حقق الشرط الأول وهي بأنه دخل قيمة فانتهينا من حكاية المطلوب لكنه لن يتم التنفيذ لأن القيمة غير رقمية لتنفيذها ندخل بدل كلمة required نكتب بدالها ReqNumber
7- التحقق من أن المدخل عبارة عن رقم فيزا كرت ندخل بدل كلمة required نكتب بدالها creditcard
وهنا بعض الكلاسات التي لا أعرف لماذا هي لكن يمكن استخدامها و تجربتها بنفسك فقط أبدلها بدل required في الكود code السابق و ستعمل معك
dateISO , dateDE , numberDE , digits
و أخيراً لا تنسوا ال title فعند استخدامك أي شئ مما سبق يجب تغير الرسالة التي ستظهر للمستخدم و ذلك من خلال استبدال النص الأخضر بما تراه مناسب أو حذف كامل ال title مع النص طبعا و ستظهر الرسالة الديفلت أي المعرفة مسبقاً
------------
للمتقدمين في الإستخدام و يريد إضافة كلاسات و استخدامها كل ما عيك هو الدخول إلى المجلد الأصفر jquery-validate و فتح الملف jquery.validate.js
و الذهاب من السطر 727 إلى سطر 739 يمكنك إضافة كلاسات بداخلها و تستخدمها
مثال إقرأ رقم 6 من أعلى فأنا كتبتها و هي جعل الصندوق مطلوب و التحقق من أن المدخل رقم فقط
ستجده في السطر 734
رمز Code:
ReqNumber: {required: true , number: true},
اقرأه و اعمل مثله !
المرفق :
حمل من هنا (http://www.dzbatna.com/attachments/595852d1314141261-jquery.validate_15.zip)
أو
رابط آخر ميجا آبلود إضغط هنا للتحميل (http://www.megaupload.com/?d=GUYHDK0I)
كان معكم ( أبو ناهض )
المصدر (http://www.iugstu.com/showthread.php?t=1105)
و السلام عليكم و رحمة الله
التعديل الأخير كان بواسطة أبو ناهض; 24 - 08 - 2014 الساعة 06:00
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif jquery.validate_15.zip (http://www.traidnt.net/vb/attachments/595852d1314144857-jquery.validate_15.zip) (284.1 كيلوبايت, عدد مرات المشاهدة 242 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم و رحمة الله
قبل البدء بالشرح طريقة سأخبركم بروعة هذا الكود code و ما يقوم به :
هذا الكود code يقوم بالتحقق من عدة أمور قبل إرسال البيانات إلى قاعدة البيانات يعني بمجرد ما يضغط المستخدم أرسل أو موافق المهم الزر سيتم التحقق من جميع الصناديق التي لديك في الفورم و يظهر رسالة خطأ للمستخدم مثلا بأن هذا الصندوق مطلوب و أنت لم تدخل قيمة أو بأن هذا الصندوق يجب إداخل فيه رابط و أنت لم تدخل رابط أو يحتاج إلى رقم و أنت أدخلت نص .. إلخ.
فهو سيفور الضغط و يتم تنفيذه بشكل سريع
سنتناولها بالأسفل بالترتيب سأشرح طريقة 3 خطوات لتفهم كل شئ
الأمر بسيط جداً لأنك بعد هيك ستضيف اسم الكلاس لأي مربع تريد التعديل عليه و سيصبح فعال بالأمر الذي أدخلته
الخطوة الأولى
حمل الملف المرفق أو إضغط هنا للتحميل (http://www.megaupload.com/?d=GUYHDK0I) وبعدها تعملوا فك ضغط فَينتُج مجلد أصفر اسمه validation
هذا المجلد بداخله عدة مجلدات و ملفات ما إلنا أي دخل بها (ربما صحيح بها ملفات زيادة لأني استخرجتها من ملفات سكربت ولم أكن دقيق إلا أنها لا تؤثر عليك بشئ فحجمها لا يتجاوز بضع كيلوات هذا الكلام اقوله علشان ما أحد يجي يذكر هذا الخطأ لي المهم انسى هذا الكلام و تابع معي ) فقط إلى عليك هو ترفع المجلد الأصفر كما هو من الخارج يعني مجلد validation ترفعه داخل مشروعك
هذه الخطوة الأولى اعتقد ما فيها أي صعوبة انك تنزل المرفق و تفك ضغطه و ترفع المجلد الناتج من فك الضغط داخل مشروعك .
الخطوة الثانية
إضافة الكود code التالي في ملف الهيدر header الخاص بمشروعك أو إلى عنده صفحة وحدة لازم يكون داخل وسم
<head>هنا</head>
الكود code الذي ستضيفه داخل وسم الهيد هو
رمز Code:
<!-- // http://www.iugstu.com // to use jquery files and validate any thinges ((this is class -*-*->:: required,email,url,date,dateISO,dateDE,ReqNumber,n umber,numberDE,digits,creditcard,)) \\\ --> <link rel="stylesheet" type="text/css" media="screen" href="validation/css/screen.css" /> <style type="text/css"> .warning { color: red; } </style> <script src="validation/lib/jquery.js" type="text/javascript"></script> <script src="validation/lib/jquery.form.js" type="text/javascript"></script> <script src="validation/jquery.validate.js" type="text/javascript"></script> <script src="validation/js/cmxforms.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function() { // show a simple loading indicator var loader = jQuery('<div id="loader"><img src="images/loading.gif" alt="loading..." /></div>') .css({position: "relative", top: "1em", left: "25em"}) .appendTo("body") .hide(); jQuery().ajaxStart(function() { loader.show(); }).ajaxStop(function() { loader.hide(); }).ajaxError(function(a, b, e) { throw e; }); var v = jQuery("#form").validate({ submitHandler: function(form) { jQuery(form).ajaxSubmit({ target: "#result" }); } }); jQuery("#reset").click(function() { v.resetForm(); }); }); </script>
أعيد و أكرر أنه يجب أن يكون داخل وسم الهيد
الخطوة الثالثة و الأخيرة
1- نريد أن نتحقق بأن القيمة المدخلة بالصندوق موجودة فعلا يعني جعل الصندوق مطلوب ادخال القيمه فيه ولا يمكن تركه فارغ فبعد الضغط على زر ارسال لن يتم تنفيذ الأمر بل سيذهب المؤشر للصندوق و يخبره رسالة بأن الصندوق مطلوب و يعلمه بالأحمر هذا في حال أن المستخدم تركه فارغ
ولعمل هذا نستخدم الكلاس التالية
رمز Code:
<input type="text" title="This field is required!" class="required" name="name">
طبعا name="name" تغيره بما يناسبك مش تتركه كما هو بل لازم يكون حسب اسم الصندوق الخاص بيك كتبتها هنا حتى لا تنساه
الكلام الي داخل title و هو باللون الأخضر هو الكلام الذي سوف يظهر للزائر إذا لم يدخل القيمة في الصندوق و كما يمكن حذفها بالكامل أي حذف رمز Code:
title="This field is required!"
لتظهر الرسالة التلقائية المكتوبة في كود code الجي كويري و أعتقد أنها نفسها
المهم هو class="required" / فهو الذي قام بكل العمل لدينا ف required تقوم بجعل الصندوق مطلوب ولا يمكن تنفيذ الأمر إلا بعد ادخال قيمة بداخله
2- التحقق من الإيميل نفس الكود code السابق لكن داخل الكلاس نكتب بدل required كلمة email
طبعاً هذه الكلمة مش عشوائية بل هي مكتوبة في الملفات الي رفعتها من المرفقات لتستخدم ككلاس
يعني لو انت مش رافع الملفات ولا كأنك عملت حاجة بكتابتها
3- التحقق من أن المدخل عبارة عن رابط ندخل بدل كلمة required نكتب بدالها url
4- التحقق من أن المدخل عبارة عن تاريخ ندخل بدل كلمة required نكتب بدالها date
5- التحقق من أن المدخل رقم وليس نص و أحرف ندخل بدل كلمة required نكتب بدالها number
6- جعل الصندوق مطلوب و التحقق من أن القيمة رقم يعني لو دخل قيمة غير رقمية سيكون حقق الشرط الأول وهي بأنه دخل قيمة فانتهينا من حكاية المطلوب لكنه لن يتم التنفيذ لأن القيمة غير رقمية لتنفيذها ندخل بدل كلمة required نكتب بدالها ReqNumber
7- التحقق من أن المدخل عبارة عن رقم فيزا كرت ندخل بدل كلمة required نكتب بدالها creditcard
وهنا بعض الكلاسات التي لا أعرف لماذا هي لكن يمكن استخدامها و تجربتها بنفسك فقط أبدلها بدل required في الكود code السابق و ستعمل معك
dateISO , dateDE , numberDE , digits
و أخيراً لا تنسوا ال title فعند استخدامك أي شئ مما سبق يجب تغير الرسالة التي ستظهر للمستخدم و ذلك من خلال استبدال النص الأخضر بما تراه مناسب أو حذف كامل ال title مع النص طبعا و ستظهر الرسالة الديفلت أي المعرفة مسبقاً
------------
للمتقدمين في الإستخدام و يريد إضافة كلاسات و استخدامها كل ما عيك هو الدخول إلى المجلد الأصفر jquery-validate و فتح الملف jquery.validate.js
و الذهاب من السطر 727 إلى سطر 739 يمكنك إضافة كلاسات بداخلها و تستخدمها
مثال إقرأ رقم 6 من أعلى فأنا كتبتها و هي جعل الصندوق مطلوب و التحقق من أن المدخل رقم فقط
ستجده في السطر 734
رمز Code:
ReqNumber: {required: true , number: true},
اقرأه و اعمل مثله !
المرفق :
حمل من هنا (http://www.dzbatna.com/attachments/595852d1314141261-jquery.validate_15.zip)
أو
رابط آخر ميجا آبلود إضغط هنا للتحميل (http://www.megaupload.com/?d=GUYHDK0I)
كان معكم ( أبو ناهض )
المصدر (http://www.iugstu.com/showthread.php?t=1105)
و السلام عليكم و رحمة الله
التعديل الأخير كان بواسطة أبو ناهض; 24 - 08 - 2014 الساعة 06:00
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif jquery.validate_15.zip (http://www.traidnt.net/vb/attachments/595852d1314144857-jquery.validate_15.zip) (284.1 كيلوبايت, عدد مرات المشاهدة 242 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
