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

/demo/container2.html

https://gitlab.com/x33n/formvalidation
HTML | 168 lines | 157 code | 9 blank | 2 comment | 0 complexity | 2c01ef6735f23cdcd597f7e40beef026 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="col-lg-8 col-lg-offset-2">
  18. <div class="page-header">
  19. <h2>Showing errors in custom container</h2>
  20. </div>
  21. <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
  22. <div class="form-group">
  23. <label class="col-lg-3 control-label">Full name</label>
  24. <div class="col-lg-4">
  25. <input type="text" class="form-control" name="firstName" placeholder="First name" />
  26. </div>
  27. <div class="col-lg-4">
  28. <input type="text" class="form-control" name="lastName" placeholder="Last name" />
  29. </div>
  30. </div>
  31. <div class="form-group">
  32. <label class="col-lg-3 control-label">Username</label>
  33. <div class="col-lg-5">
  34. <input type="text" class="form-control" name="username" />
  35. </div>
  36. </div>
  37. <div class="form-group">
  38. <label class="col-lg-3 control-label">Email address</label>
  39. <div class="col-lg-5">
  40. <input type="text" class="form-control" name="email" />
  41. </div>
  42. </div>
  43. <div class="form-group">
  44. <label class="col-lg-3 control-label">Password</label>
  45. <div class="col-lg-5">
  46. <input type="password" class="form-control" name="password" />
  47. </div>
  48. </div>
  49. <div class="form-group">
  50. <label class="col-lg-3 control-label">Gender</label>
  51. <div class="col-lg-5">
  52. <div class="radio">
  53. <label>
  54. <input type="radio" name="gender" value="male" /> Male
  55. </label>
  56. </div>
  57. <div class="radio">
  58. <label>
  59. <input type="radio" name="gender" value="female" /> Female
  60. </label>
  61. </div>
  62. <div class="radio">
  63. <label>
  64. <input type="radio" name="gender" value="other" /> Other
  65. </label>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="form-group">
  70. <div class="col-lg-9 col-lg-offset-3">
  71. <div id="errors"></div>
  72. </div>
  73. </div>
  74. <div class="form-group">
  75. <div class="col-lg-9 col-lg-offset-3">
  76. <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
  77. </div>
  78. </div>
  79. </form>
  80. </div>
  81. </section>
  82. <!-- :form -->
  83. </div>
  84. </div>
  85. <script type="text/javascript">
  86. $(document).ready(function() {
  87. $('#defaultForm').formValidation({
  88. message: 'This value is not valid',
  89. err: {
  90. container: '#errors'
  91. },
  92. icon: {
  93. valid: 'glyphicon glyphicon-ok',
  94. invalid: 'glyphicon glyphicon-remove',
  95. validating: 'glyphicon glyphicon-refresh'
  96. },
  97. fields: {
  98. firstName: {
  99. validators: {
  100. notEmpty: {
  101. message: 'The first name is required and cannot be empty'
  102. }
  103. }
  104. },
  105. lastName: {
  106. validators: {
  107. notEmpty: {
  108. message: 'The last name is required and cannot be empty'
  109. }
  110. }
  111. },
  112. username: {
  113. message: 'The username is not valid',
  114. validators: {
  115. notEmpty: {
  116. message: 'The username is required and cannot be empty'
  117. },
  118. stringLength: {
  119. min: 6,
  120. max: 30,
  121. message: 'The username must be more than 6 and less than 30 characters long'
  122. },
  123. regexp: {
  124. regexp: /^[a-zA-Z0-9_\.]+$/,
  125. message: 'The username can only consist of alphabetical, number, dot and underscore'
  126. }
  127. }
  128. },
  129. email: {
  130. validators: {
  131. emailAddress: {
  132. message: 'The input is not a valid email address'
  133. }
  134. }
  135. },
  136. password: {
  137. validators: {
  138. notEmpty: {
  139. message: 'The password is required and cannot be empty'
  140. },
  141. different: {
  142. field: 'username',
  143. message: 'The password cannot be the same as username'
  144. }
  145. }
  146. },
  147. gender: {
  148. validators: {
  149. notEmpty: {
  150. message: 'The gender is required'
  151. }
  152. }
  153. }
  154. }
  155. });
  156. });
  157. </script>
  158. </body>
  159. </html>