kaosjon Posted October 13, 2011 Share Posted October 13, 2011 Hi i am trying to develop my registration page it is a combination of multistep (tabs) with real time validation which is sort of working ok, it validates on entry which is really good, however when i include the script JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script> which is for the form validation, for some reason the next button for the tabs do not work, when i take it out the next buttons work but the form validation does not. Any ideas? All the code for the next button is at the bottom of the code below, the code for the validation is in a seperate file and is pretty big, so ask if you want me to include it. Thanks for the help JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <!-- This is a jQuery Tools standalone demo. Feel free to copy/paste. http://flowplayer.org/tools/demos/ Do *not* reference CSS files and images from flowplayer.org when in production Enjoy! --> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script> <script type="text/javascript" src="registration_validation.js" charset="utf-8"></script> <!-- standalone page styling (can be removed) --> <link rel="stylesheet" type="text/css" href="standalone.css"/> <link rel="stylesheet" type="text/css" href="scrollable.css"/> <!-- a little more standalone page styling --> <style> body { padding-top:5%; } </style> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- twitter style notification bar for validation errors --> <div id="drawer">Please fill in the empty fields marked with a <samp style="color:red">red</samp> border.</div> <!-- the form --> <form id="jform" action="#"> <div id="wizard"> <div class="items"> <!-- page1 --> <div class="page"> <h3> <strong>Step 1: </strong> Account Information <em>Please enter your login information:</em> </h3> <ul> <li class="required double"> <label> <strong>1.</strong> FirstName <span>*</span><br /> <input type="text" class="text" name="firstname" id="firstname"/> </label> <label> <strong>1.</strong> LastName <span>*</span><br /> <input type="text" class="text" name="lastname" id="lastname"/><br /> </label> </li> <!-- email --> <li class="required"> <label> <strong>1.</strong> Enter Your Email Address <span>*</span><br /> <input type="text" class="text" name="email" id="email"/> </label> </li> <!-- username --> <li class="required"> <label> <strong>2.</strong> Pick a username <span>*</span><br /> <input type="text" class="text" name="username" id="username"/> </label> </li> <!-- password --> <li class="required double"> <label> <strong>3.</strong> Choose a Password <span>*</span><br /> <input type="password" class="text" name="password" id="password"/> <em>Must be at least 8 characters long.</em> </label> <label> Verify Password <span>*</span><br /> <input type="password" class="text" name="cpassword" id="cpassword"/> </label> </li> <li class="clearfix"> <button type="button" class="next right">Proceed »</button> </li> </ul> </div> <!-- page2 --> <div class="page"> <h3> <strong>Step 2: </strong> Kingdom Information <b></b> <em>Tell us about Your Kingdom:</em> </h3> <ul> <!-- address --> <li class="required double"> <br /> <label> <strong>1.</strong> Kingdom Name <span>*</span><br /> <input type="text" class="text" name="kingdom_name" id="kingdom_name"/> </label> </li> <li class="double"> <label> <strong>2.</strong> Referal <br /> <input type="text" class="text" name="referal" id="referal"/> </label> </li> <h3><strong>Step 3: </strong> Payment Information <b></b> <em>Tell us your Payment Information:</em> </h3> <br /> <li class="required"> <label> <strong>1.</strong> Paypal Email <span>*</span><br /> <input type="text" class="text" name="paypal_email" id="paypal_email"/> </label> </li> <li class="required double"> <label> <strong>2.</strong> Country <span>*</span> <select name="country" id="country"> <option value="">-- please select --</option> <option>PayPal</option> <option>AlertPay</option> <option>MoneyBookers</option> </select> </label> <label> <strong>2.</strong> Payment Method <span>*</span> <select name="payment_method" id="payment_method"> <option value="">-- please select --</option> <option>PayPal</option> <option>AlertPay</option> <option>MoneyBookers</option> </select> </label> </li> <li class="clearfix"> <button type="button" class="prev" style="float:left">« Back</button> <button type="button" class="next right">Proceed »</button> </li> <br clear="all" /> </ul> </div> <!-- page3 --> <div class="page"> <h2> <strong>Step 3: </strong> Congratulations! <b></b> <em>You are now a happy member of the Open Source community</em> </h2> <p> <textarea id="oath" name="oath" cols="50" rows="8" readonly>ajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs dajsdnja daj da dh aj dja dj ajd ajhs d</textarea> </p> <p> <input name="newsletter" type="checkbox" id="newsletter" value="" checked /> <label for="newsletter"> Sign Up for the Monthly Telegram.</label> </p> <li class="required"> <p> <input name="agree" type="checkbox" id="agree" value="" /> <label for="agree"> I Swear To Obey the Oath Held Before Me.</label> </p> </li> <p style="margin-top:30px"> <button type="button" class="prev" style="float:left">« Back</button> <input name="send" id="send" type="submit" style="float:right"/> </p> </div> </div><!--items--> </div><!--wizard--> </form> <script> $(function() { var root = $("#wizard").scrollable(); // some variables that we need var api = root.scrollable(), drawer = $("#drawer"); // validation logic is done inside the onBeforeSeek callback api.onBeforeSeek(function(event, i) { // we are going 1 step backwards so no need for validation if (api.getIndex() < i) { // 1. get current page var page = root.find(".page").eq(api.getIndex()), // 2. .. and all required fields inside the page inputs = page.find(".required :input").removeClass("error"), // 3. .. which are empty empty = inputs.filter(function() { return $(this).val().replace(/\s*/g, '') == ''; }); // if there are empty fields, then if (empty.length) { // slide down the drawer drawer.slideDown(function() { // colored flash effect drawer.css("backgroundColor", "#FEA7A7"); setTimeout(function() { drawer.css("backgroundColor", "#FEA7A7"); }, 1000); }); // add a CSS class name "error" for empty & required fields empty.addClass("error"); // cancel seeking of the scrollable by returning false return false; // everything is good } else { // hide the drawer drawer.slideUp(); } } // update status bar $("#status li").removeClass("active").eq(i).addClass("active"); }); // if tab is pressed on the next button seek to next page root.find("button.next").keydown(function(e) { if (e.keyCode == 9) { // seeks to next tab by executing our validation routine api.next(); e.preventDefault(); } }); }); </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.