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
<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
<!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>