PageRenderTime 43ms CodeModel.GetById 15ms 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
Possible License(s): LGPL-2.1, Apache-2.0, BSD-3-Clause 
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    5. 

  5. <title>jQuery UI tabs integration demo</title>
    6. 

  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. 

  8. 

  9. <script src="../../lib/jquery.js" type="text/javascript"></script>
    10. 

  10. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
    11. 

  11. <script src="../../jquery.validate.js" type="text/javascript"></script>
    12. 

  12. 

  13. <script id="demo" type="text/javascript">
    14. 

  14. $(document).ready(function() {
    15. 

  15. 	var tabs = $("#tabs").tabs();
    16. 

  16. 	var validator = $("#signupform").validate({
    17. 

  17. 		groups: {
    18. 

  18. 			birthdate: "birthdateDay birthdateMonth birthdateYear"
    19. 

  19. 		},
    20. 

  20. 		errorPlacement: function(label, element) {
    21. 

  21. 			if (/^birthdate/.test(element[0].name)) {
    22. 

  22. 				label.insertAfter("#birthdateYear");
    23. 

  23. 			} else {
    24. 

  24. 				label.insertAfter(element);
    25. 

  25. 			}
    26. 

  26. 		}
    27. 

  27. 	});
    28. 

  28. 	
    29. 

  29. 	// validate the other two selects when one changes to update the whole group
    30. 

  30. 	var birthdaySelects = $("#birthdateGroup select").click(function() {
    31. 

  31. 		birthdaySelects.not(this).valid();
    32. 

  32. 	})
    33. 

  33. 	
    34. 

  34. 	// overwrite focusInvalid to activate tab with invalid elements
    35. 

  35. 	validator.focusInvalid = function() {
    36. 

  36. 		if( this.settings.focusInvalid ) {
    37. 

  37. 			try {
    38. 

  38. 				var focused = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []).filter(":visible");
    39. 

  39. 				tabs.tabs("select", tabs.find(">div").index(focused.parent().parent()));
    40. 

  40. 				focused.focus();
    41. 

  41. 			} catch(e) {
    42. 

  42. 				// ignore IE throwing errors when focusing hidden elements
    43. 

  43. 			}
    44. 

  44. 		}
    45. 

  45. 	};
    46. 

  46. });
    47. 

  47. </script>
    48. 

  48. 

  49. <style>
    50. 

  50. 	body { font-size: 65.2% }
    51. 

  51. 	label { display: inline-block; width: 8em; }
    52. 

  52. 	label.error { color: red; margin-left: 0.5em; width: 20em; }
    53. 

  53. </style>
    54. 

  54. 

  55. </head>
    56. 

  56. <body>
    57. 

  57. 	
    58. 

  58. <form id="signupform">
    59. 

  59. 	
    60. 

  60. 	<div id="tabs">
    61. 

  61. 		<ul>
    62. 

  62. 			<li><a href="#logindata">Login data</a></li>
    63. 

  63. 			<li><a href="#personaldata">Personal data</a></li>
    64. 

  64. 			<li><a href="#subscriptions">Subscriptions</a></li>
    65. 

  65. 		</ul>
    66. 

  66. 		<div id="logindata">
    67. 

  67. 			<p>
    68. 

  68. 				<label for="username">Username</label>
    69. 

  69. 				<input id="username" name="username" class="required" minlength="3" maxlength="20" type="text" />
    70. 

  70. 			</p>
    71. 

  71. 			<p>
    72. 

  72. 				<label for="email">Email address</label>
    73. 

  73. 				<input id="email" name="email" class="required email" type="text" />
    74. 

  74. 			</p>
    75. 

  75. 			<p>
    76. 

  76. 				<label for="password">Password</label>
    77. 

  77. 				<input name="password" type="password" class="required" id="password" minlength="4" maxlength="50" />
    78. 

  78. 			</p>
    79. 

  79. 			<p>
    80. 

  80. 				<label for="confirmpassword">Confirm Password</label>
    81. 

  81. 				<input name="confirmpassword" type="password" class="required" equalTo="#password" id="confirmpassword" />
    82. 

  82. 			</p>
    83. 

  83. 		</div>
    84. 

  84. 		<div id="personaldata">
    85. 

  85. 			<p>
    86. 

  86. 				<label for="street">Street</label>
    87. 

  87. 				<input id="street" name="street" class="required" minlength="3" maxlength="50" type="text" />
    88. 

  88. 			</p>
    89. 

  89. 			<p>
    90. 

  90. 				<label for="city">City</label>
    91. 

  91. 				<input id="city" name="city" class="required" minlength="3" maxlength="50" type="text" />
    92. 

  92. 			</p>
    93. 

  93. 			<p id="birthdateGroup">
    94. 

  94. 				<label for="birthdateDay">Birthdate</label>
    95. 

  95. 				<select id="birthdateDay" name="birthdateDay" class="required">
    96. 

  96. 					<option value="">Day</option>
    97. 

  97. 					<option>1</option>
    98. 

  98. 					<option>2</option>
    99. 

  99. 					<option>3</option>
    100. 

  100. 					<option>...</option>
    101. 

  101. 				</select>
    102. 

  102. 				<select id="birthdateMonth" name="birthdateMonth" class="required">
    103. 

  103. 					<option value="">Month</option>
    104. 

  104. 					<option>1</option>
    105. 

  105. 					<option>2</option>
    106. 

  106. 					<option>3</option>
    107. 

  107. 					<option>4</option>
    108. 

  108. 					<option>5</option>
    109. 

  109. 					<option>6</option>
    110. 

  110. 					<option>7</option>
    111. 

  111. 					<option>8</option>
    112. 

  112. 					<option>9</option>
    113. 

  113. 					<option>10</option>
    114. 

  114. 					<option>11</option>
    115. 

  115. 					<option>12</option>
    116. 

  116. 				</select>
    117. 

  117. 				<select id="birthdateYear" name="birthdateYear" class="required">
    118. 

  118. 					<option value="">Year</option>
    119. 

  119. 					<option>1950</option>
    120. 

  120. 					<option>1951</option>
    121. 

  121. 					<option>1952</option>
    122. 

  122. 					<option>1953</option>
    123. 

  123. 					<option>1954</option>
    124. 

  124. 					<option>1955</option>
    125. 

  125. 					<option>...</option>
    126. 

  126. 				</select>
    127. 

  127. 			</p>
    128. 

  128. 		</div>
    129. 

  129. 		<div id="subscriptions">
    130. 

  130. 			<p>
    131. 

  131. 				<label for="weekly">Weekly Newsletter</label>
    132. 

  132. 				<input id="weekly" name="weekly" type="checkbox" />
    133. 

  133. 			</p>
    134. 

  134. 			<p>
    135. 

  135. 				<label for="updates">Product Updates</label>
    136. 

  136. 				<input id="updates" name="updates" type="checkbox" />
    137. 

  137. 			</p>
    138. 

  138. 			<p>
    139. 

  139. 				<label for="terms">Terms and conditions</label>
    140. 

  140. 				<input id="terms" name="terms" class="required" type="checkbox" />
    141. 

  141. 			</p>
    142. 

  142. 		</div>
    143. 

  143. 	</div>
    144. 

  144. 

  145. 	<input type="submit" />
    146. 

  146. </form>
    147. 

  147. 

  148. 

  149. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    150. 

  150. </script>
    151. 

  151. <script type="text/javascript">
    152. 

  152. _uacct = "UA-2623402-1";
    153. 

  153. urchinTracker();
    154. 

  154. </script>
    155. 

  155. 

  156. </body>
    157. 

  157. </html>
    158.