PageRenderTime 49ms CodeModel.GetById 21ms RepoModel.GetById 0ms app.codeStats 0ms

/lib/jquery-validate/demo/errorcontainer-demo.html

#
HTML | 161 lines | 144 code | 16 blank | 1 comment | 0 complexity | 233ababb283be35baeaddcc2f49129c1 MD5 | raw file
Possible License(s): LGPL-2.1, Apache-2.0, BSD-3-Clause 
    

  1. <?xml version="1.0" encoding="ISO-8859-1" ?>
    2. 

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. 

  3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. 

  4. <head>
    5. 

  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    6. 

  6. <title>Test for jQuery validate() plugin</title>
    7. 

  7. 

  8. <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
    9. 

  9. 

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

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

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

  13. 

  14. <style type="text/css">
    15. 

  15. .cmxform fieldset p.error label { color: red; }
    16. 

  16. div.container {
    17. 

  17. 	background-color: #eee;
    18. 

  18. 	border: 1px solid red;
    19. 

  19. 	margin: 5px;
    20. 

  20. 	padding: 5px;
    21. 

  21. }
    22. 

  22. div.container ol li {
    23. 

  23. 	list-style-type: disc;
    24. 

  24. 	margin-left: 20px;
    25. 

  25. }
    26. 

  26. div.container { display: none }
    27. 

  27. .container label.error {
    28. 

  28. 	display: inline;
    29. 

  29. }
    30. 

  30. form.cmxform { width: 30em; }
    31. 

  31. form.cmxform label.error {
    32. 

  32. 	display: block;
    33. 

  33. 	margin-left: 1em;
    34. 

  34. 	width: auto;
    35. 

  35. }
    36. 

  36. </style>
    37. 

  37. 

  38. <script type="text/javascript">
    39. 

  39. // only for demo purposes
    40. 

  40. $.validator.setDefaults({
    41. 

  41. 	submitHandler: function() {
    42. 

  42. 		alert("submitted! (skipping validation for cancel button)");
    43. 

  43. 	}
    44. 

  44. });
    45. 

  45. 

  46. $().ready(function() {
    47. 

  47. 	$("#form1").validate({
    48. 

  48. 		errorLabelContainer: $("#form1 div.error")
    49. 

  49. 	});
    50. 

  50. 	
    51. 

  51. 	var container = $('div.container');
    52. 

  52. 	// validate the form when it is submitted
    53. 

  53. 	var validator = $("#form2").validate({
    54. 

  54. 		errorContainer: container,
    55. 

  55. 		errorLabelContainer: $("ol", container),
    56. 

  56. 		wrapper: 'li',
    57. 

  57. 		meta: "validate"
    58. 

  58. 	});
    59. 

  59. 	
    60. 

  60. 	$(".cancel").click(function() {
    61. 

  61. 		validator.resetForm();
    62. 

  62. 	});
    63. 

  63. });
    64. 

  64. </script>
    65. 

  65. 

  66. </head>
    67. 

  67. <body>
    68. 

  68. 

  69. <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
    70. 

  70. <div id="main">
    71. 

  71. 

  72. <form method="get" class="cmxform" id="form1" action="">
    73. 

  73. 	<fieldset>
    74. 

  74. 		<legend>Login Form</legend>
    75. 

  75. 		<p>
    76. 

  76. 			<label>Username</label>
    77. 

  77. 			<input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" />
    78. 

  78. 		</p>
    79. 

  79. 		<p>
    80. 

  80. 			<label>Password</label>
    81. 

  81. 			<input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" />
    82. 

  82. 		</p>
    83. 

  83. 		<div class="error">
    84. 

  84. 		</div>
    85. 

  85. 		<p>
    86. 

  86. 			<input class="submit" type="submit" value="Login"/>
    87. 

  87. 		</p>
    88. 

  88. 	</fieldset>
    89. 

  89. </form>
    90. 

  90. 

  91. <!-- our error container -->
    92. 

  92. <div class="container">
    93. 

  93. 	<h4>There are serious errors in your form submission, please see below for details.</h4>
    94. 

  94. 	<ol>
    95. 

  95. 		<li><label for="email" class="error">Please enter your email address</label></li>
    96. 

  96. 		<li><label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label></li>
    97. 

  97. 		<li><label for="address" class="error">Please enter your address (at least 3 characters)</label></li>
    98. 

  98. 		<li><label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label></li>
    99. 

  99. 		<li><label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label></li>
    100. 

  100. 	</ol>
    101. 

  101. </div>
    102. 

  102. 

  103. <form class="cmxform" id="form2" method="get" action="">
    104. 

  104. 	<fieldset>
    105. 

  105. 		<legend>Validating a complete form</legend>
    106. 

  106. 		<p>
    107. 

  107. 			<label for="email">Email</label>
    108. 

  108. 			<input id="email" name="email" class="{validate:{required:true,email:true}}" />
    109. 

  109. 		</p>
    110. 

  110. 		<p>
    111. 

  111. 			<label for="agree">Favorite Color</label>
    112. 

  112. 			<select id="color" name="color" title="Please select your favorite color!" class="{validate:{required:true}}">
    113. 

  113. 				<option></option>
    114. 

  114. 				<option>Red</option>
    115. 

  115. 				<option>Blue</option>
    116. 

  116. 				<option>Yellow</option>
    117. 

  117. 			</select>
    118. 

  118. 		</p>
    119. 

  119. 		<p>
    120. 

  120. 			<label for="phone">Phone</label>
    121. 

  121. 			<input id="phone" name="phone" class="some styles {validate:{required:true,number:true, rangelength:[2,8]}}" />
    122. 

  122. 		</p>
    123. 

  123. 		<p>
    124. 

  124. 			<label for="address">Address</label>
    125. 

  125. 			<input id="address" name="address" class="some other styles {validate:{required:true,minlength:3}}" />
    126. 

  126. 		</p>
    127. 

  127. 		<p>
    128. 

  128. 			<label for="avatar">Avatar</label>
    129. 

  129. 			<input type="file" id="avatar" name="avatar" class="{validate:{required:true,accept:true}}" />
    130. 

  130. 		</p>
    131. 

  131. 		<p>
    132. 

  132. 			<label for="agree">Please agree to our policy</label>
    133. 

  133. 			<input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" class="{validate:{required:true}}" />
    134. 

  134. 		</p>
    135. 

  135. 		<p>
    136. 

  136. 			<label for="cv">CV</label>
    137. 

  137. 			<input type="file" id="cv" name="cv" class="{validate:{required:true,accept:'docx?|txt|pdf'}}" />
    138. 

  138. 		</p>
    139. 

  139. 		<p>
    140. 

  140. 			<input class="submit" type="submit" value="Submit"/>
    141. 

  141. 			<input class="cancel" type="submit" value="Cancel"/>
    142. 

  142. 		</p>
    143. 

  143. 	</fieldset>
    144. 

  144. </form>
    145. 

  145. 

  146. <div class="container">
    147. 

  147. 	<h4>There are serious errors in your form submission, please see details above the form!</h4>
    148. 

  148. </div>
    149. 

  149. 

  150. <a href="index.html">Back to main page</a>
    151. 

  151. 

  152. </div>
    153. 

  153. 

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

  155. </script>
    156. 

  156. <script type="text/javascript">
    157. 

  157. _uacct = "UA-2623402-1";
    158. 

  158. urchinTracker();
    159. 

  159. </script>
    160. 

  160. </body>
    161. 

  161. </html>
    162.