feedbackIcons.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>BootstrapValidator demo</title>
  5. <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
  6. <link rel="stylesheet" href="../dist/css/bootstrapValidator.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/bootstrapValidator.js"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <div class="row">
  14. <div class="col-lg-8 col-lg-offset-2">
  15. <div class="page-header">
  16. <h2>Disable feedback icons for particular fields</h2>
  17. </div>
  18. <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
  19. <div class="form-group">
  20. <label class="col-lg-3 control-label">Full name</label>
  21. <div class="col-lg-4">
  22. <input type="text" class="form-control" name="firstName" placeholder="First name" />
  23. </div>
  24. <div class="col-lg-4">
  25. <input type="text" class="form-control" name="lastName" placeholder="Last name" />
  26. </div>
  27. </div>
  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" data-bv-feedbackicons="false" />
  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 class="form-group">
  47. <label class="col-lg-3 control-label">Gender</label>
  48. <div class="col-lg-5">
  49. <div class="radio">
  50. <label>
  51. <input type="radio" name="gender" value="male" /> Male
  52. </label>
  53. </div>
  54. <div class="radio">
  55. <label>
  56. <input type="radio" name="gender" value="female" /> Female
  57. </label>
  58. </div>
  59. <div class="radio">
  60. <label>
  61. <input type="radio" name="gender" value="other" /> Other
  62. </label>
  63. </div>
  64. </div>
  65. </div>
  66. <div class="form-group hide">
  67. <div class="col-lg-9 col-lg-offset-3">
  68. <ul id="errors"></ul>
  69. </div>
  70. </div>
  71. <div class="form-group">
  72. <div class="col-lg-9 col-lg-offset-3">
  73. <button type="submit" class="btn btn-primary">Sign up</button>
  74. </div>
  75. </div>
  76. </form>
  77. </div>
  78. </div>
  79. <script type="text/javascript">
  80. $(document).ready(function() {
  81. $('#defaultForm')
  82. .bootstrapValidator({
  83. message: 'This value is not valid',
  84. feedbackIcons: {
  85. valid: 'glyphicon glyphicon-ok',
  86. invalid: 'glyphicon glyphicon-remove',
  87. validating: 'glyphicon glyphicon-refresh'
  88. },
  89. fields: {
  90. 'firstName': {
  91. validators: {
  92. notEmpty: {
  93. message: 'The first name is required and cannot be empty'
  94. }
  95. }
  96. },
  97. 'lastName': {
  98. validators: {
  99. notEmpty: {
  100. message: 'The last name is required and cannot be empty'
  101. }
  102. }
  103. },
  104. 'username': {
  105. message: 'The username is not valid',
  106. validators: {
  107. notEmpty: {
  108. message: 'The username is required and cannot be empty'
  109. },
  110. stringLength: {
  111. min: 6,
  112. max: 30,
  113. message: 'The username must be more than 6 and less than 30 characters long'
  114. },
  115. regexp: {
  116. regexp: /^[a-zA-Z0-9_\.]+$/,
  117. message: 'The username can only consist of alphabetical, number, dot and underscore'
  118. },
  119. different: {
  120. field: 'password',
  121. message: 'The username and password cannot be the same as each other'
  122. }
  123. }
  124. },
  125. 'email': {
  126. validators: {
  127. emailAddress: {
  128. message: 'The input is not a valid email address'
  129. }
  130. }
  131. },
  132. 'password': {
  133. feedbackIcons: 'false',
  134. validators: {
  135. notEmpty: {
  136. message: 'The password is required and cannot be empty'
  137. },
  138. different: {
  139. field: 'username',
  140. message: 'The password cannot be the same as username'
  141. }
  142. }
  143. },
  144. 'gender': {
  145. feedbackIcons: false,
  146. validators: {
  147. notEmpty: {
  148. message: 'The gender is required'
  149. }
  150. }
  151. }
  152. }
  153. });
  154. });
  155. </script>
  156. </body>
  157. </html>