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

/demo/pure/horizontalForm.html

https://gitlab.com/x33n/formvalidation
HTML | 187 lines | 169 code | 17 blank | 1 comment | 0 complexity | 57e7c950e4950750f479644c98cad915 MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <title>FormValidation &rarr; Pure demo</title>
  6. <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"/>
  7. <!--[if lte IE 8]><link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css"><![endif]-->
  8. <!--[if gt IE 8]><!--><link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css"><!--<![endif]-->
  9. <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
  10. <link rel="stylesheet" href="../../dist/css/formValidation.css"/>
  11. <script type="text/javascript" src="../../vendor/jquery/jquery.min.js"></script>
  12. <script type="text/javascript" src="../../dist/js/formValidation.js"></script>
  13. <script type="text/javascript" src="../../dist/js/framework/pure.js"></script>
  14. <style type="text/css">
  15. body {
  16. padding: 50px 0;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div class="pure-g">
  22. <div class="pure-u-1 pure-u-md-6-24"></div>
  23. <div class="pure-u-1 pure-u-md-12-24">
  24. <form id="horizontalForm" class="pure-form pure-form-aligned">
  25. <fieldset>
  26. <legend>Pure Form</legend>
  27. <div class="pure-control-group">
  28. <label>Full name</label>
  29. <input name="firstName" type="text" placeholder="First name" />
  30. </div>
  31. <div class="pure-control-group">
  32. <label></label>
  33. <input name="lastName" type="text" placeholder="Last name" />
  34. </div>
  35. <div class="pure-control-group">
  36. <label>Username</label>
  37. <input name="username" type="text" placeholder="Username" />
  38. </div>
  39. <div class="pure-control-group">
  40. <label>Email address</label>
  41. <input name="email" type="text" placeholder="Email address" />
  42. </div>
  43. <div class="pure-control-group">
  44. <label>Password</label>
  45. <input name="password" type="password" placeholder="Password" />
  46. </div>
  47. <div class="pure-control-group">
  48. <label>Gender</label>
  49. <input name="gender" type="radio" value="male" /> Male<br/>
  50. <label></label>
  51. <input name="gender" type="radio" value="female" /> Female<br/>
  52. <label></label>
  53. <input name="gender" type="radio" value="other" /> Other<br/>
  54. </div>
  55. <div class="pure-control-group">
  56. <label id="captchaOperation"></label>
  57. <input type="text" name="captcha" />
  58. </div>
  59. <div class="pure-control-group">
  60. <label></label>
  61. <input name="agree" type="checkbox" /> Agree with the terms and conditions
  62. </div>
  63. <div class="pure-control-group">
  64. <label></label>
  65. <button type="submit" class="pure-button pure-button-primary">Submit</button>
  66. </div>
  67. </fieldset>
  68. </form>
  69. </div>
  70. <div class="pure-u-1 pure-u-md-6-24"></div>
  71. </div>
  72. <script type="text/javascript">
  73. $(document).ready(function() {
  74. // Generate a simple captcha
  75. function randomNumber(min, max) {
  76. return Math.floor(Math.random() * (max - min + 1) + min);
  77. };
  78. $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
  79. $('#horizontalForm').formValidation({
  80. framework: 'pure',
  81. icon: {
  82. valid: 'fa fa-check',
  83. invalid: 'fa fa-times',
  84. validating: 'fa fa-refresh',
  85. feedback: 'fv-control-feedback'
  86. },
  87. fields: {
  88. firstName: {
  89. validators: {
  90. notEmpty: {
  91. message: 'The first name is required'
  92. }
  93. }
  94. },
  95. lastName: {
  96. validators: {
  97. notEmpty: {
  98. message: 'The last name is required'
  99. }
  100. }
  101. },
  102. username: {
  103. message: 'The username is not valid',
  104. validators: {
  105. notEmpty: {
  106. message: 'The username is required'
  107. },
  108. stringLength: {
  109. min: 6,
  110. max: 30,
  111. message: 'The username must be more than 6 and less than 30 characters long'
  112. },
  113. regexp: {
  114. regexp: /^[a-zA-Z0-9_\.]+$/,
  115. message: 'The username can only consist of alphabetical, number, dot and underscore'
  116. }
  117. }
  118. },
  119. email: {
  120. validators: {
  121. notEmpty: {
  122. message: 'The email address is required'
  123. },
  124. emailAddress: {
  125. message: 'The input is not a valid email address'
  126. }
  127. }
  128. },
  129. password: {
  130. validators: {
  131. notEmpty: {
  132. message: 'The password is required'
  133. },
  134. different: {
  135. field: 'username',
  136. message: 'The password cannot be the same as username'
  137. }
  138. }
  139. },
  140. gender: {
  141. validators: {
  142. notEmpty: {
  143. message: 'The gender is required'
  144. }
  145. }
  146. },
  147. captcha: {
  148. validators: {
  149. callback: {
  150. message: 'Wrong answer',
  151. callback: function(value, validator) {
  152. var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
  153. return value == sum;
  154. }
  155. }
  156. }
  157. },
  158. agree: {
  159. validators: {
  160. notEmpty: {
  161. message: 'You must agree with the terms and conditions'
  162. }
  163. }
  164. }
  165. }
  166. });
  167. });
  168. </script>
  169. </body>
  170. </html>