PageRenderTime 31ms CodeModel.GetById 23ms app.highlight 6ms RepoModel.GetById 1ms app.codeStats 0ms

/lib/jquery-validate/demo/tabs/index.html

#
HTML | 157 lines | 144 code | 13 blank | 0 comment | 0 complexity | ea2acf7a5d1e9aa905b71c8047bff4ea MD5 | raw file
  1<!DOCTYPE html>
  2<html>
  3<head>
  4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5<title>jQuery UI tabs integration demo</title>
  6
  7<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
  8
  9<script src="../../lib/jquery.js" type="text/javascript"></script>
 10<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
 11<script src="../../jquery.validate.js" type="text/javascript"></script>
 12
 13<script id="demo" type="text/javascript">
 14$(document).ready(function() {
 15	var tabs = $("#tabs").tabs();
 16	var validator = $("#signupform").validate({
 17		groups: {
 18			birthdate: "birthdateDay birthdateMonth birthdateYear"
 19		},
 20		errorPlacement: function(label, element) {
 21			if (/^birthdate/.test(element[0].name)) {
 22				label.insertAfter("#birthdateYear");
 23			} else {
 24				label.insertAfter(element);
 25			}
 26		}
 27	});
 28	
 29	// validate the other two selects when one changes to update the whole group
 30	var birthdaySelects = $("#birthdateGroup select").click(function() {
 31		birthdaySelects.not(this).valid();
 32	})
 33	
 34	// overwrite focusInvalid to activate tab with invalid elements
 35	validator.focusInvalid = function() {
 36		if( this.settings.focusInvalid ) {
 37			try {
 38				var focused = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []).filter(":visible");
 39				tabs.tabs("select", tabs.find(">div").index(focused.parent().parent()));
 40				focused.focus();
 41			} catch(e) {
 42				// ignore IE throwing errors when focusing hidden elements
 43			}
 44		}
 45	};
 46});
 47</script>
 48
 49<style>
 50	body { font-size: 65.2% }
 51	label { display: inline-block; width: 8em; }
 52	label.error { color: red; margin-left: 0.5em; width: 20em; }
 53</style>
 54
 55</head>
 56<body>
 57	
 58<form id="signupform">
 59	
 60	<div id="tabs">
 61		<ul>
 62			<li><a href="#logindata">Login data</a></li>
 63			<li><a href="#personaldata">Personal data</a></li>
 64			<li><a href="#subscriptions">Subscriptions</a></li>
 65		</ul>
 66		<div id="logindata">
 67			<p>
 68				<label for="username">Username</label>
 69				<input id="username" name="username" class="required" minlength="3" maxlength="20" type="text" />
 70			</p>
 71			<p>
 72				<label for="email">Email address</label>
 73				<input id="email" name="email" class="required email" type="text" />
 74			</p>
 75			<p>
 76				<label for="password">Password</label>
 77				<input name="password" type="password" class="required" id="password" minlength="4" maxlength="50" />
 78			</p>
 79			<p>
 80				<label for="confirmpassword">Confirm Password</label>
 81				<input name="confirmpassword" type="password" class="required" equalTo="#password" id="confirmpassword" />
 82			</p>
 83		</div>
 84		<div id="personaldata">
 85			<p>
 86				<label for="street">Street</label>
 87				<input id="street" name="street" class="required" minlength="3" maxlength="50" type="text" />
 88			</p>
 89			<p>
 90				<label for="city">City</label>
 91				<input id="city" name="city" class="required" minlength="3" maxlength="50" type="text" />
 92			</p>
 93			<p id="birthdateGroup">
 94				<label for="birthdateDay">Birthdate</label>
 95				<select id="birthdateDay" name="birthdateDay" class="required">
 96					<option value="">Day</option>
 97					<option>1</option>
 98					<option>2</option>
 99					<option>3</option>
100					<option>...</option>
101				</select>
102				<select id="birthdateMonth" name="birthdateMonth" class="required">
103					<option value="">Month</option>
104					<option>1</option>
105					<option>2</option>
106					<option>3</option>
107					<option>4</option>
108					<option>5</option>
109					<option>6</option>
110					<option>7</option>
111					<option>8</option>
112					<option>9</option>
113					<option>10</option>
114					<option>11</option>
115					<option>12</option>
116				</select>
117				<select id="birthdateYear" name="birthdateYear" class="required">
118					<option value="">Year</option>
119					<option>1950</option>
120					<option>1951</option>
121					<option>1952</option>
122					<option>1953</option>
123					<option>1954</option>
124					<option>1955</option>
125					<option>...</option>
126				</select>
127			</p>
128		</div>
129		<div id="subscriptions">
130			<p>
131				<label for="weekly">Weekly Newsletter</label>
132				<input id="weekly" name="weekly" type="checkbox" />
133			</p>
134			<p>
135				<label for="updates">Product Updates</label>
136				<input id="updates" name="updates" type="checkbox" />
137			</p>
138			<p>
139				<label for="terms">Terms and conditions</label>
140				<input id="terms" name="terms" class="required" type="checkbox" />
141			</p>
142		</div>
143	</div>
144
145	<input type="submit" />
146</form>
147
148
149<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
150</script>
151<script type="text/javascript">
152_uacct = "UA-2623402-1";
153urchinTracker();
154</script>
155
156</body>
157</html>