PageRenderTime 47ms CodeModel.GetById 22ms RepoModel.GetById 0ms app.codeStats 0ms

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

#
HTML | 155 lines | 138 code | 17 blank | 0 comment | 0 complexity | 6e110e6eca2bc6b66ae8f30b3db33b14 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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  6. <title>Test for jQuery validate() plugin</title>
  7. <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
  8. <script src="../lib/jquery.js" type="text/javascript"></script>
  9. <script src="../lib/jquery.metadata.js" type="text/javascript"></script>
  10. <script src="../jquery.validate.js" type="text/javascript"></script>
  11. <script type="text/javascript">
  12. // only for demo purposes
  13. $.validator.setDefaults({
  14. submitHandler: function() {
  15. alert("submitted!");
  16. }
  17. });
  18. $.metadata.setType("attr", "validate");
  19. $(document).ready(function() {
  20. $("#form1").validate();
  21. $("#selecttest").validate();
  22. });
  23. </script>
  24. <style type="text/css">
  25. .block { display: block; }
  26. form.cmxform label.error { display: none; }
  27. </style>
  28. </head>
  29. <body>
  30. <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
  31. <div id="main">
  32. <form class="cmxform" id="form1" method="get" action="">
  33. <fieldset>
  34. <legend>Validating a form with a radio and checkbox buttons</legend>
  35. <fieldset>
  36. <legend>Gender</legend>
  37. <label for="gender_male">
  38. <input type="radio" id="gender_male" value="m" name="gender" validate="required:true" />
  39. Male
  40. </label>
  41. <label for="gender_female">
  42. <input type="radio" id="gender_female" value="f" name="gender"/>
  43. Female
  44. </label>
  45. <label for="gender" class="error">Please select your gender</label>
  46. </fieldset>
  47. <fieldset>
  48. <legend>Family</legend>
  49. <label for="family_single">
  50. <input type="radio" id="family_single" value="s" name="family" validate="required:true" />
  51. Single
  52. </label>
  53. <label for="family_married">
  54. <input type="radio" id="family_married" value="m" name="family" />
  55. Married
  56. </label>
  57. <label for="family_other">
  58. <input type="radio" id="family_other" value="o" name="family" />
  59. Other
  60. </label>
  61. <label for="family" class="error">Please select your family status.</label>
  62. </fieldset>
  63. <p>
  64. <label for="agree">Please agree to our policy</label>
  65. <input type="checkbox" class="checkbox" id="agree" name="agree" validate="required:true" />
  66. <br/>
  67. <label for="agree" class="error block">Please agree to our policy!</label>
  68. </p>
  69. <fieldset>
  70. <legend>Spam</legend>
  71. <label for="spam_email">
  72. <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" validate="required:true, minlength:2" />
  73. Spam via E-Mail
  74. </label>
  75. <label for="spam_phone">
  76. <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
  77. Spam via Phone
  78. </label>
  79. <label for="spam_mail">
  80. <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
  81. Spam via Mail
  82. </label>
  83. <label for="spam[]" class="error">Please select at least two types of spam.</label>
  84. </fieldset>
  85. <p>
  86. <input class="submit" type="submit" value="Submit"/>
  87. </p>
  88. </fieldset>
  89. </form>
  90. <form id="selecttest">
  91. <h2>Some tests with selects</h2>
  92. <p>
  93. <label for="jungle">Please select a jungle noun</label><br/>
  94. <select id="jungle" name="jungle" title="Please select something!" validate="required:true">
  95. <option value=""></option>
  96. <option value="1">Buga</option>
  97. <option value="2">Baga</option>
  98. <option value="3">Oi</option>
  99. </select>
  100. </p>
  101. <p>
  102. <label for="fruit">Please select at least two fruits</label><br/>
  103. <select id="fruit" name="fruit" title="Please select at least two fruits" validate="required:true, minlength:2" multiple="multiple">
  104. <option value="b">Banana</option>
  105. <option value="a">Apple</option>
  106. <option value="p">Peach</option>
  107. <option value="t">Turtle</option>
  108. </select>
  109. </p>
  110. <p>
  111. <label for="vegetables">Please select no more than two vergetables</label><br/>
  112. <select id="vegetables" name="vegetables" title="Please select no more than two vergetables" validate="required:true, maxlength:2" multiple="multiple">
  113. <option value="p">Potato</option>
  114. <option value="t">Tomato</option>
  115. <option value="s">Salad</option>
  116. </select>
  117. </p>
  118. <p>
  119. <label for="cars">Please select at least two cars, but no more than three</label><br/>
  120. <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">
  121. <option value="m_sl">Mercedes SL</option>
  122. <option value="o_c">Opel Corsa</option>
  123. <option value="vw_p">VW Polo</option>
  124. <option value="t_s">Titanic Skoda</option>
  125. </select>
  126. </p>
  127. <p><input type="submit" value="Validate Selecttests"/></p>
  128. </form>
  129. <a href="index.html">Back to main page</a>
  130. </div>
  131. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  132. </script>
  133. <script type="text/javascript">
  134. _uacct = "UA-2623402-1";
  135. urchinTracker();
  136. </script>
  137. </body>
  138. </html>