/lib/jquery-validate/demo/radio-checkbox-select-demo.html

# · HTML · 155 lines · 138 code · 17 blank · 0 comment · 0 complexity · 6e110e6eca2bc6b66ae8f30b3db33b14 MD5 · raw file 

    

  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. <script type="text/javascript">
    15. 

  15. // only for demo purposes
    16. 

  16. $.validator.setDefaults({
    17. 

  17. 	submitHandler: function() {
    18. 

  18. 		alert("submitted!");
    19. 

  19. 	}
    20. 

  20. });
    21. 

  21. 	
    22. 

  22. $.metadata.setType("attr", "validate");
    23. 

  23. 

  24. $(document).ready(function() {
    25. 

  25. 	$("#form1").validate();
    26. 

  26. 	$("#selecttest").validate();
    27. 

  27. });
    28. 

  28. </script>
    29. 

  29. 

  30. <style type="text/css">
    31. 

  31. .block { display: block; }
    32. 

  32. form.cmxform label.error { display: none; }	
    33. 

  33. </style>
    34. 

  34. 

  35. </head>
    36. 

  36. <body>
    37. 

  37. 

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

  39. <div id="main">
    40. 

  40. 

  41. <form class="cmxform" id="form1" method="get" action="">
    42. 

  42. 	<fieldset>
    43. 

  43. 		<legend>Validating a form with a radio and checkbox buttons</legend>
    44. 

  44. 		<fieldset>
    45. 

  45. 			<legend>Gender</legend>
    46. 

  46. 			<label for="gender_male">
    47. 

  47. 				<input  type="radio" id="gender_male" value="m" name="gender" validate="required:true" />
    48. 

  48. 				Male
    49. 

  49. 			</label>
    50. 

  50. 			<label for="gender_female">
    51. 

  51. 				<input  type="radio" id="gender_female" value="f" name="gender"/>
    52. 

  52. 				Female
    53. 

  53. 			</label>
    54. 

  54. 			<label for="gender" class="error">Please select your gender</label>
    55. 

  55. 		</fieldset>
    56. 

  56. 		<fieldset>
    57. 

  57. 			<legend>Family</legend>
    58. 

  58. 			<label for="family_single">
    59. 

  59. 				<input  type="radio" id="family_single" value="s" name="family" validate="required:true" />
    60. 

  60. 				Single
    61. 

  61. 			</label>
    62. 

  62. 			<label for="family_married">
    63. 

  63. 				<input  type="radio" id="family_married" value="m" name="family" />
    64. 

  64. 				Married
    65. 

  65. 			</label>
    66. 

  66. 			<label for="family_other">
    67. 

  67. 				<input  type="radio" id="family_other" value="o" name="family" />
    68. 

  68. 				Other
    69. 

  69. 			</label>
    70. 

  70. 			<label for="family" class="error">Please select your family status.</label>
    71. 

  71. 		</fieldset>
    72. 

  72. 		<p>
    73. 

  73. 			<label for="agree">Please agree to our policy</label>
    74. 

  74. 			<input type="checkbox" class="checkbox" id="agree" name="agree" validate="required:true" />
    75. 

  75. 			<br/>
    76. 

  76. 			<label for="agree" class="error block">Please agree to our policy!</label>
    77. 

  77. 		</p>
    78. 

  78. 		<fieldset>
    79. 

  79. 			<legend>Spam</legend>
    80. 

  80. 			<label for="spam_email">
    81. 

  81. 				<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" validate="required:true, minlength:2" />
    82. 

  82. 				Spam via E-Mail
    83. 

  83. 			</label>
    84. 

  84. 			<label for="spam_phone">
    85. 

  85. 				<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
    86. 

  86. 				Spam via Phone
    87. 

  87. 			</label>
    88. 

  88. 			<label for="spam_mail">
    89. 

  89. 				<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
    90. 

  90. 				Spam via Mail
    91. 

  91. 			</label>
    92. 

  92. 			<label for="spam[]" class="error">Please select at least two types of spam.</label>
    93. 

  93. 		</fieldset>
    94. 

  94. 		<p>
    95. 

  95. 			<input class="submit" type="submit" value="Submit"/>
    96. 

  96. 		</p>
    97. 

  97. 	</fieldset>
    98. 

  98. </form>
    99. 

  99. 

  100. <form id="selecttest">
    101. 

  101. 	<h2>Some tests with selects</h2>
    102. 

  102. 	<p>
    103. 

  103. 		<label for="jungle">Please select a jungle noun</label><br/>
    104. 

  104. 		<select id="jungle" name="jungle" title="Please select something!" validate="required:true">
    105. 

  105. 			<option value=""></option>
    106. 

  106. 			<option value="1">Buga</option>
    107. 

  107. 			<option value="2">Baga</option>
    108. 

  108. 			<option value="3">Oi</option>
    109. 

  109. 		</select>
    110. 

  110. 	</p>
    111. 

  111. 	
    112. 

  112. 	<p>
    113. 

  113. 		<label for="fruit">Please select at least two fruits</label><br/>
    114. 

  114. 		<select id="fruit" name="fruit" title="Please select at least two fruits" validate="required:true, minlength:2" multiple="multiple">
    115. 

  115. 			<option value="b">Banana</option>
    116. 

  116. 			<option value="a">Apple</option>
    117. 

  117. 			<option value="p">Peach</option>
    118. 

  118. 			<option value="t">Turtle</option>
    119. 

  119. 		</select>
    120. 

  120. 	</p>
    121. 

  121. 	
    122. 

  122. 	<p>
    123. 

  123. 		<label for="vegetables">Please select no more than two vergetables</label><br/>
    124. 

  124. 		<select id="vegetables" name="vegetables" title="Please select no more than two vergetables" validate="required:true, maxlength:2" multiple="multiple">
    125. 

  125. 			<option value="p">Potato</option>
    126. 

  126. 			<option value="t">Tomato</option>
    127. 

  127. 			<option value="s">Salad</option>
    128. 

  128. 		</select>
    129. 

  129. 	</p>
    130. 

  130. 	
    131. 

  131. 	<p>
    132. 

  132. 		<label for="cars">Please select at least two cars, but no more than three</label><br/>
    133. 

  133. 		<select id="cars" name="cars" title="Please select at least two cars, but no more than three" validate="required:true, rangelength:[2,3]" multiple="multiple">
    134. 

  134. 			<option value="m_sl">Mercedes SL</option>
    135. 

  135. 			<option value="o_c">Opel Corsa</option>
    136. 

  136. 			<option value="vw_p">VW Polo</option>
    137. 

  137. 			<option value="t_s">Titanic Skoda</option>
    138. 

  138. 		</select>
    139. 

  139. 	</p>
    140. 

  140. 	
    141. 

  141. 	<p><input type="submit" value="Validate Selecttests"/></p>
    142. 

  142. </form>
    143. 

  143. 

  144. <a href="index.html">Back to main page</a>
    145. 

  145. 

  146. </div>
    147. 

  147. 

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

  149. </script>
    150. 

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

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

  152. urchinTracker();
    153. 

  153. </script>
    154. 

  154. </body>
    155. 

  155. </html>
    156.