Chakira
11-01-2013, بتوقيت غرينيتش 03:20 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* ط§ط³طھط®ط¯ط§ظ… ط§ظ„jquery ظپظ‰ ط¹ظ…ظ„ظٹط§طھ ط§ظ„طھط*ظ‚ظ‚ ظ„ظ„ط*ظ‚ظˆظ„ ظˆط§ظ„ط§ط²ط±ط§ط± ظˆط§ظ„ط§ط®طھظٹط§ط±ط§طھ form validation (http://www.dzbatna.com/t1413223/)
بسم الله الرحمن الرحيم
هذا شرح طريقة تفصيلى لكيفية استخدام الjquery فى عمليات التحقق للفورمز او اختيار مربع او تفعيل زر او تعطيله,
والشرح طريقة بأذن الله حاولت ان اجعله سلس حتى يتم استيعابه بشكل جيد بأذن الله >>>عامل فيها استاذ http://www.dzbatna.com/images/smilies/shiny01.gif
اولا: ما المقصود بvalidation؟
كثيرا ما تشاهد عندما تقوم بتسجيل عضوية او ملا اى فراغات, يطلب منك حد ادنى للحروف لليوزر
وايضا تطابق الباسورد باللى قبله, هل فكرت كيف يتم فعل ذلك؟ اكيد بمكتبة jquery اللذيذهhttp://www.dzbatna.com/images/smilies/icon30.gif
طيب , مثلا عندنا فورم تسجيل عضوية جديدة register.php ونريد دمج jquery واومره فيه حتى نستغل
الvalidation بدل ما نستخدم اوامر الphp المٌطولة............
اولا: انظر لهذه الصورة اللى سويتها وانا شارح فيها فكرة دمج الjuqery على اى صفحة تستخدمها...
http://i48.tinypic.com/s1u52h.jpg
تمام , صورة ولا احلى..........http://www.dzbatna.com/images/smilies/icon30.gif
بعد ما عرفت الفكرة , دعنا نبدأ نسوى مثال عملى:
اولا: راح نستخدم ملفين js
1-ملف المكتبة jquery.js
2-ملف الvalidation وهو jquery.validate.js
نستدعيهم فى اول الصفحة:
رمز Code:
<script src="lib/jquery.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script>
معاهم ملف css طبعا
رمز Code:
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
الحين راح ندمج اوامر الvalidation بين وسم
رمز Code:
<script type="text/javascript"> اوامر التحقق</script>
راجع الصورة ثم انظر للكود code وراح تجد الفكرة بسيطة:
رمز Code:
$.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate the comment form when it is submitted $("#commentForm").validate(); // validate signup form on keyup and submit $("#signupForm").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { firstname: "من فضلك اكتب اسمك", lastname: "من فضلت اكتب لقبك", username: { required: "من فضلك اكتب اليوزر", minlength: "Your username must consist of at least 2 characters" }, password: { required: "من فضلك اكتب الباسورد", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "من فضلك اعد كتابة الباسورد", minlength: "Your password must be at least 5 characters long", equalTo: "اعد كتابة الباسورد مثل السابق" }, email: "من فضلك اضف ايميل صالح", agree: "من فضلك اختار موافقتك لشروطنا" } }); // propose username by combining first- and lastname $("#username").focus(function() { var firstname = $("#firstname").val(); var lastname = $("#lastname").val(); if(firstname && lastname && !this.value) { this.value = firstname + "." + lastname; } }); //code to hide topic selection, disable for demo var newsletter = $("#newsletter"); // newsletter topics are optional, hide at first var inital = newsletter.is(":checked"); var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); var topicInputs = topics.find("input").attr("disabled", !inital); // show when newsletter is checked newsletter.click(function() { topics[this.checked ? "removeClass" : "addClass"]("gray"); topicInputs.attr("disabled", !this.checked); }); }); </script>
ويتبقى اوامر الcss ثم الفورم الخاص بنا
وهذا هو كود code صفحتنا ككل:
رمز Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1256"> <meta name="author" content=""> <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> <script src="lib/jquery.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate the comment form when it is submitted $("#commentForm").validate(); // validate signup form on keyup and submit $("#signupForm").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { firstname: "من فضلك اكتب اسمك", lastname: "من فضلت اكتب لقبك", username: { required: "من فضلك اكتب اليوزر", minlength: "Your username must consist of at least 2 characters" }, password: { required: "من فضلك اكتب الباسورد", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "من فضلك اعد كتابة الباسورد", minlength: "Your password must be at least 5 characters long", equalTo: "اعد كتابة الباسورد مثل السابق" }, email: "من فضلك اضف ايميل صالح", agree: "من فضلك اختار موافقتك لشروطنا" } }); // propose username by combining first- and lastname $("#username").focus(function() { var firstname = $("#firstname").val(); var lastname = $("#lastname").val(); if(firstname && lastname && !this.value) { this.value = firstname + "." + lastname; } }); //code to hide topic selection, disable for demo var newsletter = $("#newsletter"); // newsletter topics are optional, hide at first var inital = newsletter.is(":checked"); var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); var topicInputs = topics.find("input").attr("disabled", !inital); // show when newsletter is checked newsletter.click(function() { topics[this.checked ? "removeClass" : "addClass"]("gray"); topicInputs.attr("disabled", !this.checked); }); }); </script> <style type="text/css"> #commentForm { width: 500px; } #commentForm label { width: 250px; } #commentForm label.error, #commentForm input.submit { margin-left: 253px; } #signupForm { width: 670px; } #signupForm label.error { margin-left: 10px; width: auto; display: inline; } #newsletter_topics label.error { display: none; margin-left: 103px; } </style> <title>مثال للتحقق من ملأ الفراغات وعدد الاحرف وتفعيل الازرار</title> </head> <body> <form dir="rtl" class="cmxform" id="signupForm" method="get" action=""> <fieldset> <legend>تسحيل عضوية جديدة</legend> <p> <label for="firstname">الاسم</label> <input id="firstname" name="firstname" /> </p> <p> <label for="lastname">اللقب</label> <input id="lastname" name="lastname" /> </p> <p> <label for="username">اليوزر</label> <input id="username" name="username" /> </p> <p> <label for="password">الباسورد</label> <input id="password" name="password" type="password" /> </p> <p> <label for="confirm_password">أعد كتابة الباسورد</label> <input id="confirm_password" name="confirm_password" type="password" /> </p> <p> <label for="email">الايميل</label> <input id="email" name="email" /> </p> <p> <label for="agree">لقد قبلت شروط الانضمام</label> <input type="checkbox" class="checkbox" id="agree" name="agree" /> </p> <p> <label for="newsletter">ارغب باستلام جديد المقالات على بريدى</label> <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /> </p> <fieldset id="newsletter_topics"> <legend>اختار نوعية المقالات التى تريدها الوصول على بريدك(اختار 2على الاقل)</legend> <label for="topic_marketflash"> <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> اسلاميات </label> <label for="topic_fuzz"> <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> برامــج </label> <label for="topic_digester"> <input type="checkbox" id="topic_digester" value="digester" name="topic" /> اخبار الطب </label> <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> </fieldset> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form> <h1 id="banner"><a href="http://vistacompany.org/">vista-design</a> vistacompany</h1> </body> </html>
وفى النهاية هذه صورة للمجلدات :
http://i45.tinypic.com/2e3255f.png
مثال عملى :
اضغــــــط هـــــــــنا DEMO (http://vistacompany.org/vistavalid/)
الملفات ملحقه بالموضوع
أتمنى يكون الدرس مفصل مفهوم
تحياتى vista-design
التعديل الأخير كان بواسطة vista-design; 15 - 12 - 2014 الساعة 02:04
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif vistavalid.zip (http://www.traidnt.net/vb/attachments/435999d1260831862-vistavalid.zip) (66.4 كيلوبايت, عدد مرات المشاهدة 765 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
بسم الله الرحمن الرحيم
هذا شرح طريقة تفصيلى لكيفية استخدام الjquery فى عمليات التحقق للفورمز او اختيار مربع او تفعيل زر او تعطيله,
والشرح طريقة بأذن الله حاولت ان اجعله سلس حتى يتم استيعابه بشكل جيد بأذن الله >>>عامل فيها استاذ http://www.dzbatna.com/images/smilies/shiny01.gif
اولا: ما المقصود بvalidation؟
كثيرا ما تشاهد عندما تقوم بتسجيل عضوية او ملا اى فراغات, يطلب منك حد ادنى للحروف لليوزر
وايضا تطابق الباسورد باللى قبله, هل فكرت كيف يتم فعل ذلك؟ اكيد بمكتبة jquery اللذيذهhttp://www.dzbatna.com/images/smilies/icon30.gif
طيب , مثلا عندنا فورم تسجيل عضوية جديدة register.php ونريد دمج jquery واومره فيه حتى نستغل
الvalidation بدل ما نستخدم اوامر الphp المٌطولة............
اولا: انظر لهذه الصورة اللى سويتها وانا شارح فيها فكرة دمج الjuqery على اى صفحة تستخدمها...
http://i48.tinypic.com/s1u52h.jpg
تمام , صورة ولا احلى..........http://www.dzbatna.com/images/smilies/icon30.gif
بعد ما عرفت الفكرة , دعنا نبدأ نسوى مثال عملى:
اولا: راح نستخدم ملفين js
1-ملف المكتبة jquery.js
2-ملف الvalidation وهو jquery.validate.js
نستدعيهم فى اول الصفحة:
رمز Code:
<script src="lib/jquery.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script>
معاهم ملف css طبعا
رمز Code:
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
الحين راح ندمج اوامر الvalidation بين وسم
رمز Code:
<script type="text/javascript"> اوامر التحقق</script>
راجع الصورة ثم انظر للكود code وراح تجد الفكرة بسيطة:
رمز Code:
$.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate the comment form when it is submitted $("#commentForm").validate(); // validate signup form on keyup and submit $("#signupForm").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { firstname: "من فضلك اكتب اسمك", lastname: "من فضلت اكتب لقبك", username: { required: "من فضلك اكتب اليوزر", minlength: "Your username must consist of at least 2 characters" }, password: { required: "من فضلك اكتب الباسورد", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "من فضلك اعد كتابة الباسورد", minlength: "Your password must be at least 5 characters long", equalTo: "اعد كتابة الباسورد مثل السابق" }, email: "من فضلك اضف ايميل صالح", agree: "من فضلك اختار موافقتك لشروطنا" } }); // propose username by combining first- and lastname $("#username").focus(function() { var firstname = $("#firstname").val(); var lastname = $("#lastname").val(); if(firstname && lastname && !this.value) { this.value = firstname + "." + lastname; } }); //code to hide topic selection, disable for demo var newsletter = $("#newsletter"); // newsletter topics are optional, hide at first var inital = newsletter.is(":checked"); var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); var topicInputs = topics.find("input").attr("disabled", !inital); // show when newsletter is checked newsletter.click(function() { topics[this.checked ? "removeClass" : "addClass"]("gray"); topicInputs.attr("disabled", !this.checked); }); }); </script>
ويتبقى اوامر الcss ثم الفورم الخاص بنا
وهذا هو كود code صفحتنا ككل:
رمز Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1256"> <meta name="author" content=""> <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> <script src="lib/jquery.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate the comment form when it is submitted $("#commentForm").validate(); // validate signup form on keyup and submit $("#signupForm").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { firstname: "من فضلك اكتب اسمك", lastname: "من فضلت اكتب لقبك", username: { required: "من فضلك اكتب اليوزر", minlength: "Your username must consist of at least 2 characters" }, password: { required: "من فضلك اكتب الباسورد", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "من فضلك اعد كتابة الباسورد", minlength: "Your password must be at least 5 characters long", equalTo: "اعد كتابة الباسورد مثل السابق" }, email: "من فضلك اضف ايميل صالح", agree: "من فضلك اختار موافقتك لشروطنا" } }); // propose username by combining first- and lastname $("#username").focus(function() { var firstname = $("#firstname").val(); var lastname = $("#lastname").val(); if(firstname && lastname && !this.value) { this.value = firstname + "." + lastname; } }); //code to hide topic selection, disable for demo var newsletter = $("#newsletter"); // newsletter topics are optional, hide at first var inital = newsletter.is(":checked"); var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); var topicInputs = topics.find("input").attr("disabled", !inital); // show when newsletter is checked newsletter.click(function() { topics[this.checked ? "removeClass" : "addClass"]("gray"); topicInputs.attr("disabled", !this.checked); }); }); </script> <style type="text/css"> #commentForm { width: 500px; } #commentForm label { width: 250px; } #commentForm label.error, #commentForm input.submit { margin-left: 253px; } #signupForm { width: 670px; } #signupForm label.error { margin-left: 10px; width: auto; display: inline; } #newsletter_topics label.error { display: none; margin-left: 103px; } </style> <title>مثال للتحقق من ملأ الفراغات وعدد الاحرف وتفعيل الازرار</title> </head> <body> <form dir="rtl" class="cmxform" id="signupForm" method="get" action=""> <fieldset> <legend>تسحيل عضوية جديدة</legend> <p> <label for="firstname">الاسم</label> <input id="firstname" name="firstname" /> </p> <p> <label for="lastname">اللقب</label> <input id="lastname" name="lastname" /> </p> <p> <label for="username">اليوزر</label> <input id="username" name="username" /> </p> <p> <label for="password">الباسورد</label> <input id="password" name="password" type="password" /> </p> <p> <label for="confirm_password">أعد كتابة الباسورد</label> <input id="confirm_password" name="confirm_password" type="password" /> </p> <p> <label for="email">الايميل</label> <input id="email" name="email" /> </p> <p> <label for="agree">لقد قبلت شروط الانضمام</label> <input type="checkbox" class="checkbox" id="agree" name="agree" /> </p> <p> <label for="newsletter">ارغب باستلام جديد المقالات على بريدى</label> <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /> </p> <fieldset id="newsletter_topics"> <legend>اختار نوعية المقالات التى تريدها الوصول على بريدك(اختار 2على الاقل)</legend> <label for="topic_marketflash"> <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> اسلاميات </label> <label for="topic_fuzz"> <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> برامــج </label> <label for="topic_digester"> <input type="checkbox" id="topic_digester" value="digester" name="topic" /> اخبار الطب </label> <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> </fieldset> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form> <h1 id="banner"><a href="http://vistacompany.org/">vista-design</a> vistacompany</h1> </body> </html>
وفى النهاية هذه صورة للمجلدات :
http://i45.tinypic.com/2e3255f.png
مثال عملى :
اضغــــــط هـــــــــنا DEMO (http://vistacompany.org/vistavalid/)
الملفات ملحقه بالموضوع
أتمنى يكون الدرس مفصل مفهوم
تحياتى vista-design
التعديل الأخير كان بواسطة vista-design; 15 - 12 - 2014 الساعة 02:04
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif vistavalid.zip (http://www.traidnt.net/vb/attachments/435999d1260831862-vistavalid.zip) (66.4 كيلوبايت, عدد مرات المشاهدة 765 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
