اريد استعمال jquery في بعض ازرار المنتدى
- بادئ الموضوع daviesgo
- تاريخ البدء
-
يُرجى اختيار عنوان مناسب لموضوعك عند وضع مشكلة فى قسم المشاكل والحلول ومراجعة قوانين القسم والتنبيه التالي قبل المشاركة
بسم الله الرحمن الرحيم
هذا شرح تفصيلى لكيفية استخدام الjquery فى عمليات التحقق للفورمز او اختيار مربع او تفعيل زر او تعطيله,
والشرح بأذن الله حاولت ان اجعله سلس حتى يتم استيعابه بشكل جيد بأذن الله >>>عامل فيها استاذ :shiny01:
اولا: ما المقصود بvalidation؟
كثيرا ما تشاهد عندما تقوم بتسجيل عضوية او ملا اى فراغات, يطلب منك حد ادنى للحروف لليوزر
وايضا تطابق الباسورد باللى قبله, هل فكرت كيف يتم فعل ذلك؟ اكيد بمكتبة jquery اللذيذه
طيب , مثلا عندنا فورم تسجيل عضوية جديدة register.php ونريد دمج jquery واومره فيه حتى نستغل
الvalidation بدل ما نستخدم اوامر الphp المٌطولة............
اولا: انظر لهذه الصورة اللى سويتها وانا شارح فيها فكرة دمج الjuqery على اى صفحة تستخدمها...
بعد ما عرفت الفكرة , دعنا نبدأ نسوى مثال عملى:
اولا: راح نستخدم ملفين js
1-ملف المكتبة jquery.js
2-ملف الvalidation وهو jquery.validate.js
نستدعيهم فى اول الصفحة:
معاهم ملف css طبعا
الحين راح ندمج اوامر الvalidation بين وسم
راجع الصورة ثم انظر للكود وراح تجد الفكرة بسيطة:
[/PHP]
وفى النهاية
الملفات ملحقه بالموضوع
أتمنى يكون الدرس مفهوم
تحياتى mr.jihad
هذا شرح تفصيلى لكيفية استخدام الjquery فى عمليات التحقق للفورمز او اختيار مربع او تفعيل زر او تعطيله,
والشرح بأذن الله حاولت ان اجعله سلس حتى يتم استيعابه بشكل جيد بأذن الله >>>عامل فيها استاذ :shiny01:
اولا: ما المقصود بvalidation؟
كثيرا ما تشاهد عندما تقوم بتسجيل عضوية او ملا اى فراغات, يطلب منك حد ادنى للحروف لليوزر
وايضا تطابق الباسورد باللى قبله, هل فكرت كيف يتم فعل ذلك؟ اكيد بمكتبة jquery اللذيذه
طيب , مثلا عندنا فورم تسجيل عضوية جديدة register.php ونريد دمج jquery واومره فيه حتى نستغل
الvalidation بدل ما نستخدم اوامر الphp المٌطولة............
اولا: انظر لهذه الصورة اللى سويتها وانا شارح فيها فكرة دمج الjuqery على اى صفحة تستخدمها...
بعد ما عرفت الفكرة , دعنا نبدأ نسوى مثال عملى:
اولا: راح نستخدم ملفين js
1-ملف المكتبة jquery.js
2-ملف الvalidation وهو jquery.validate.js
نستدعيهم فى اول الصفحة:
PHP:
<script src="lib/jquery.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script>
PHP:
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
PHP:
<script type="text/javascript"> اوامر التحقق</script>راجع الصورة ثم انظر للكود وراح تجد الفكرة بسيطة:
PHP:
$.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 ثم الفورم الخاص بنا
وهذا هو كود صفحتنا ككل:
[PHP]<!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>وفى النهاية
الملفات ملحقه بالموضوع
أتمنى يكون الدرس مفهوم
تحياتى mr.jihad