$.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>