PageRenderTime 46ms CodeModel.GetById 17ms RepoModel.GetById 0ms app.codeStats 0ms

/demo/validators.html

https://gitlab.com/x33n/formvalidation
HTML | 285 lines | 262 code | 21 blank | 2 comment | 0 complexity | 2a3e0894d6677c66e8dbf6f1cc869742 MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>FormValidation demo</title>
  5. <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
  6. <link rel="stylesheet" href="../dist/css/formValidation.css"/>
  7. <script type="text/javascript" src="../vendor/jquery/jquery.min.js"></script>
  8. <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
  9. <script type="text/javascript" src="../dist/js/formValidation.js"></script>
  10. <script type="text/javascript" src="../dist/js/framework/bootstrap.js"></script>
  11. </head>
  12. <body>
  13. <div class="container">
  14. <div class="row">
  15. <!-- form: -->
  16. <section>
  17. <div class="page-header">
  18. <h1>Built-in validators</h1>
  19. </div>
  20. <div class="col-lg-8 col-lg-offset-2">
  21. <form id="defaultForm" method="post" action="target.php" class="form-horizontal">
  22. <fieldset>
  23. <legend>Not Empty validator</legend>
  24. <div class="form-group">
  25. <label class="col-lg-3 control-label">Username</label>
  26. <div class="col-lg-5">
  27. <input type="text" class="form-control" name="username" />
  28. </div>
  29. </div>
  30. <div class="form-group">
  31. <label class="col-lg-3 control-label">Country</label>
  32. <div class="col-lg-5">
  33. <select class="form-control" name="country">
  34. <option value="">-- Select a country --</option>
  35. <option value="fr">France</option>
  36. <option value="de">Germany</option>
  37. <option value="it">Italy</option>
  38. <option value="jp">Japan</option>
  39. <option value="ru">Russia</option>
  40. <option value="gb">United Kingdom</option>
  41. <option value="us">United State</option>
  42. </select>
  43. </div>
  44. </div>
  45. <div class="form-group">
  46. <div class="col-lg-5 col-lg-offset-3">
  47. <div class="checkbox">
  48. <input type="checkbox" name="acceptTerms" /> Accept the terms and policies
  49. </div>
  50. </div>
  51. </div>
  52. </fieldset>
  53. <fieldset>
  54. <legend>Regular expression based validators</legend>
  55. <div class="form-group">
  56. <label class="col-lg-3 control-label">Email address</label>
  57. <div class="col-lg-5">
  58. <input type="text" class="form-control" name="email" />
  59. </div>
  60. </div>
  61. <div class="form-group">
  62. <label class="col-lg-3 control-label">Website</label>
  63. <div class="col-lg-5">
  64. <input type="text" class="form-control" name="website" placeholder="http://" />
  65. </div>
  66. </div>
  67. <div class="form-group">
  68. <label class="col-lg-3 control-label">US Phone number</label>
  69. <div class="col-lg-5">
  70. <input type="text" class="form-control" name="phoneNumberUS" />
  71. </div>
  72. </div>
  73. <div class="form-group">
  74. <label class="col-lg-3 control-label">UK Phone number</label>
  75. <div class="col-lg-5">
  76. <input type="text" class="form-control" name="phoneNumberUK" />
  77. </div>
  78. </div>
  79. <div class="form-group">
  80. <label class="col-lg-3 control-label">Hex, RGB, HSL, Keyword color</label>
  81. <div class="col-lg-3">
  82. <input type="text" class="form-control" name="color" />
  83. </div>
  84. </div>
  85. <div class="form-group">
  86. <label class="col-lg-3 control-label">All colors</label>
  87. <div class="col-lg-3">
  88. <input type="text" class="form-control" name="colorAll" />
  89. </div>
  90. </div>
  91. <div class="form-group">
  92. <label class="col-lg-3 control-label">US zip code</label>
  93. <div class="col-lg-3">
  94. <input type="text" class="form-control" name="zipCode" />
  95. </div>
  96. </div>
  97. </fieldset>
  98. <fieldset>
  99. <legend>Identical validator</legend>
  100. <div class="form-group">
  101. <label class="col-lg-3 control-label">Password</label>
  102. <div class="col-lg-5">
  103. <input type="password" class="form-control" name="password" />
  104. </div>
  105. </div>
  106. <div class="form-group">
  107. <label class="col-lg-3 control-label">Retype password</label>
  108. <div class="col-lg-5">
  109. <input type="password" class="form-control" name="confirmPassword" />
  110. </div>
  111. </div>
  112. </fieldset>
  113. <fieldset>
  114. <legend>Other validators</legend>
  115. <div class="form-group">
  116. <label class="col-lg-3 control-label">Ages</label>
  117. <div class="col-lg-3">
  118. <input type="text" class="form-control" name="ages" />
  119. </div>
  120. </div>
  121. </fieldset>
  122. <div class="form-group">
  123. <div class="col-lg-9 col-lg-offset-3">
  124. <button type="submit" class="btn btn-primary">Submit</button>
  125. </div>
  126. </div>
  127. </form>
  128. </div>
  129. </section>
  130. <!-- :form -->
  131. </div>
  132. </div>
  133. <script type="text/javascript">
  134. $(document).ready(function() {
  135. $('#defaultForm').formValidation({
  136. message: 'This value is not valid',
  137. icon: {
  138. valid: 'glyphicon glyphicon-ok',
  139. invalid: 'glyphicon glyphicon-remove',
  140. validating: 'glyphicon glyphicon-refresh'
  141. },
  142. fields: {
  143. username: {
  144. message: 'The username is not valid',
  145. validators: {
  146. notEmpty: {
  147. message: 'The username is required and can\'t be empty'
  148. },
  149. stringLength: {
  150. min: 6,
  151. max: 30,
  152. message: 'The username must be more than 6 and less than 30 characters long'
  153. },
  154. regexp: {
  155. regexp: /^[a-zA-Z0-9_\.]+$/,
  156. message: 'The username can only consist of alphabetical, number, dot and underscore'
  157. }
  158. }
  159. },
  160. country: {
  161. validators: {
  162. notEmpty: {
  163. message: 'The country is required and can\'t be empty'
  164. }
  165. }
  166. },
  167. acceptTerms: {
  168. validators: {
  169. notEmpty: {
  170. message: 'You have to accept the terms and policies'
  171. }
  172. }
  173. },
  174. email: {
  175. validators: {
  176. notEmpty: {
  177. message: 'The email address is required and can\'t be empty'
  178. },
  179. emailAddress: {
  180. message: 'The input is not a valid email address'
  181. }
  182. }
  183. },
  184. website: {
  185. validators: {
  186. uri: {
  187. message: 'The input is not a valid URL'
  188. }
  189. }
  190. },
  191. phoneNumberUS: {
  192. validators: {
  193. phone: {
  194. message: 'The input is not a valid US phone number'
  195. }
  196. }
  197. },
  198. phoneNumberUK: {
  199. validators: {
  200. phone: {
  201. message: 'The input is not a valid UK phone number',
  202. country: 'GB'
  203. }
  204. }
  205. },
  206. color: {
  207. validators: {
  208. color: {
  209. type: ['hex', 'rgb', 'hsl', 'keyword'],
  210. message: 'Must be a valid %s color'
  211. }
  212. }
  213. },
  214. colorAll: {
  215. validators: {
  216. color: {}
  217. }
  218. },
  219. zipCode: {
  220. validators: {
  221. zipCode: {
  222. country: 'US',
  223. message: 'The input is not a valid US zip code'
  224. }
  225. }
  226. },
  227. password: {
  228. validators: {
  229. notEmpty: {
  230. message: 'The password is required and can\'t be empty'
  231. }
  232. }
  233. },
  234. confirmPassword: {
  235. validators: {
  236. notEmpty: {
  237. message: 'The confirm password is required and can\'t be empty'
  238. },
  239. identical: {
  240. field: 'password',
  241. message: 'The password and its confirm are not the same'
  242. }
  243. }
  244. },
  245. ages: {
  246. validators: {
  247. lessThan: {
  248. value: 100,
  249. inclusive: true,
  250. message: 'The ages has to be less than 100'
  251. },
  252. greaterThan: {
  253. value: 10,
  254. inclusive: false,
  255. message: 'The ages has to be greater than or equals to 10'
  256. }
  257. }
  258. }
  259. }
  260. });
  261. });
  262. </script>
  263. </body>
  264. </html>