PageRenderTime 58ms CodeModel.GetById 25ms RepoModel.GetById 0ms app.codeStats 0ms

/demo/collapse.html

https://gitlab.com/x33n/formvalidation
HTML | 264 lines | 246 code | 15 blank | 3 comment | 0 complexity | 741ae16ff2c898524340d7015eaf0865 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. <div class="col-lg-8 col-lg-offset-2">
  16. <div class="page-header">
  17. <h2>Using with Bootstrap Collapse</h2>
  18. </div>
  19. <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
  20. <div class="panel-group" id="steps">
  21. <!-- Step 1 -->
  22. <div class="panel panel-default">
  23. <div class="panel-heading">
  24. <h4 class="panel-title"><a data-toggle="collapse" data-parent="#steps" href="#stepOne">Account</a></h4>
  25. </div>
  26. <div id="stepOne" class="panel-collapse collapse in">
  27. <div class="panel-body">
  28. <div class="form-group">
  29. <label class="col-lg-3 control-label">Username</label>
  30. <div class="col-lg-5">
  31. <input type="text" class="form-control" name="username" />
  32. </div>
  33. </div>
  34. <div class="form-group">
  35. <label class="col-lg-3 control-label">Email address</label>
  36. <div class="col-lg-5">
  37. <input type="text" class="form-control" name="email" />
  38. </div>
  39. </div>
  40. <div class="form-group">
  41. <label class="col-lg-3 control-label">Password</label>
  42. <div class="col-lg-5">
  43. <input type="password" class="form-control" name="password" />
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. <!-- Step 2 -->
  50. <div class="panel panel-default">
  51. <div class="panel-heading">
  52. <h4 class="panel-title"><a data-toggle="collapse" data-parent="#steps" href="#stepTwo">Personal</a></h4>
  53. </div>
  54. <div id="stepTwo" class="panel-collapse collapse">
  55. <div class="panel-body">
  56. <div class="form-group">
  57. <label class="col-lg-3 control-label">Full name</label>
  58. <div class="col-lg-4">
  59. <input type="text" class="form-control" name="firstName" placeholder="First name" />
  60. </div>
  61. <div class="col-lg-4">
  62. <input type="text" class="form-control" name="lastName" placeholder="Last name" />
  63. </div>
  64. </div>
  65. <div class="form-group">
  66. <label class="col-lg-3 control-label">Gender</label>
  67. <div class="col-lg-5">
  68. <div class="radio">
  69. <label>
  70. <input type="radio" name="gender" value="male" /> Male
  71. </label>
  72. </div>
  73. <div class="radio">
  74. <label>
  75. <input type="radio" name="gender" value="female" /> Female
  76. </label>
  77. </div>
  78. <div class="radio">
  79. <label>
  80. <input type="radio" name="gender" value="other" /> Other
  81. </label>
  82. </div>
  83. </div>
  84. </div>
  85. <div class="form-group">
  86. <label class="col-lg-3 control-label">Birthday</label>
  87. <div class="col-lg-5">
  88. <input type="text" class="form-control" name="birthday" placeholder="YYYY/MM/DD" />
  89. </div>
  90. </div>
  91. <div class="form-group">
  92. <label class="col-lg-3 control-label">Bio</label>
  93. <div class="col-lg-5">
  94. <textarea class="form-control" name="bio" rows="5"></textarea>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. <!-- Step 3 -->
  101. <div class="panel panel-default">
  102. <div class="panel-heading">
  103. <h4 class="panel-title"><a data-toggle="collapse" data-parent="#steps" href="#stepThree">Contact</a></h4>
  104. </div>
  105. <div id="stepThree" class="panel-collapse collapse">
  106. <div class="panel-body">
  107. <div class="form-group">
  108. <label class="col-lg-3 control-label">Phone number</label>
  109. <div class="col-lg-5">
  110. <input type="text" class="form-control" name="phoneNumber" />
  111. </div>
  112. </div>
  113. <div class="form-group">
  114. <label class="col-lg-3 control-label">Street</label>
  115. <div class="col-lg-5">
  116. <input type="text" class="form-control" name="street" />
  117. </div>
  118. </div>
  119. <div class="form-group">
  120. <label class="col-lg-3 control-label">City</label>
  121. <div class="col-lg-5">
  122. <input type="text" class="form-control" name="city" />
  123. </div>
  124. </div>
  125. <div class="form-group">
  126. <div class="col-lg-9 col-lg-offset-3">
  127. <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </form>
  135. </div>
  136. </div>
  137. </div>
  138. <script type="text/javascript">
  139. $(document).ready(function() {
  140. $('#defaultForm').formValidation({
  141. message: 'This value is not valid',
  142. excluded: ':disabled',
  143. icon: {
  144. valid: 'glyphicon glyphicon-ok',
  145. invalid: 'glyphicon glyphicon-remove',
  146. validating: 'glyphicon glyphicon-refresh'
  147. },
  148. fields: {
  149. firstName: {
  150. validators: {
  151. notEmpty: {
  152. message: 'The first name is required and cannot be empty'
  153. },
  154. stringCase: {
  155. message: 'The first name must contain upper case characters only',
  156. case: 'upper'
  157. },
  158. regexp: {
  159. regexp: /^[A-Z\s]+$/i,
  160. message: 'The first name can only consist of alphabetical characters and spaces'
  161. }
  162. }
  163. },
  164. lastName: {
  165. validators: {
  166. notEmpty: {
  167. message: 'The last name is required and cannot be empty'
  168. },
  169. stringCase: {
  170. message: 'The last name must contain upper case characters only',
  171. case: 'upper'
  172. },
  173. regexp: {
  174. regexp: /^[A-Z\s]+$/i,
  175. message: 'The last name can only consist of alphabetical characters and spaces'
  176. }
  177. }
  178. },
  179. username: {
  180. message: 'The username is not valid',
  181. validators: {
  182. notEmpty: {
  183. message: 'The username is required and cannot be empty'
  184. },
  185. stringLength: {
  186. min: 6,
  187. max: 30,
  188. message: 'The username must be more than 6 and less than 30 characters long'
  189. },
  190. regexp: {
  191. regexp: /^[a-zA-Z0-9_\.]+$/,
  192. message: 'The username can only consist of alphabetical, number, dot and underscore'
  193. }
  194. }
  195. },
  196. email: {
  197. validators: {
  198. emailAddress: {
  199. message: 'The input is not a valid email address'
  200. }
  201. }
  202. },
  203. password: {
  204. validators: {
  205. notEmpty: {
  206. message: 'The password is required and cannot be empty'
  207. },
  208. different: {
  209. field: 'username',
  210. message: 'The password cannot be the same as username'
  211. }
  212. }
  213. },
  214. gender: {
  215. validators: {
  216. notEmpty: {
  217. message: 'The gender is required'
  218. }
  219. }
  220. },
  221. birthday: {
  222. validators: {
  223. date: {
  224. format: 'YYYY/MM/DD',
  225. message: 'The birthday is not valid'
  226. }
  227. }
  228. },
  229. phoneNumber: {
  230. validators: {
  231. digits: {
  232. message: 'The value can contain only digits'
  233. }
  234. }
  235. }
  236. }
  237. }).on('err.form.fv', function(e) {
  238. console.log('error');
  239. // Active the panel element containing the first invalid element
  240. var $form = $(e.target),
  241. validator = $form.data('formValidation'),
  242. $invalidField = validator.getInvalidFields().eq(0),
  243. $collapse = $invalidField.parents('.collapse');
  244. $collapse.collapse('show');
  245. });
  246. });
  247. </script>
  248. </body>
  249. </html>