remote.html 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap Validate demo</title>
  5. <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.css"/>
  6. <!--[if IE 7]>
  7. <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome-ie7.min.css">
  8. <![endif]-->
  9. <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css"/>
  10. <script type="text/javascript" src="/vendor/jquery/jquery-1.10.2.min.js"></script>
  11. <script type="text/javascript" src="/vendor/bootstrap/js/bootstrap.min.js"></script>
  12. <script type="text/javascript" src="/dist/js/bootstrapvalidate.js"></script>
  13. </head>
  14. <body>
  15. <div class="container">
  16. <div class="row">
  17. <!-- form: -->
  18. <section>
  19. <div class="page-header">
  20. <h1>Bootstrap Validate plugin</h1>
  21. </div>
  22. <div class="col-lg-8 col-lg-offset-2">
  23. <form id="defaultForm" method="post" class="form-horizontal">
  24. <fieldset>
  25. <legend>Remote validator</legend>
  26. <div class="form-group">
  27. <label class="col-lg-3 control-label">Username</label>
  28. <div class="col-lg-5">
  29. <input type="text" class="form-control" name="username" />
  30. </div>
  31. </div>
  32. <div class="form-group">
  33. <label class="col-lg-3 control-label">Email address</label>
  34. <div class="col-lg-5">
  35. <input type="text" class="form-control" name="email" />
  36. </div>
  37. </div>
  38. </fieldset>
  39. <div class="form-group">
  40. <div class="col-lg-9 col-lg-offset-3">
  41. <button type="submit" class="btn btn-primary">Submit</button>
  42. </div>
  43. </div>
  44. </form>
  45. </div>
  46. </section>
  47. <!-- :form -->
  48. </div>
  49. </div>
  50. <script type="text/javascript">
  51. $(document).ready(function() {
  52. $('#defaultForm').bootstrapValidate({
  53. fields: {
  54. username: {
  55. message: 'The username is not valid',
  56. validator: {
  57. notEmpty: {
  58. message: 'The username is required and can\'t be empty'
  59. },
  60. remote: {
  61. url: 'remote.php',
  62. message: 'The username is not available'
  63. }
  64. }
  65. },
  66. email: {
  67. validator: {
  68. notEmpty: {
  69. message: 'The email address is required and can\'t be empty'
  70. },
  71. remote: {
  72. url: 'remote.php',
  73. message: 'The email is not available'
  74. }
  75. }
  76. }
  77. },
  78. message: 'This value is not valid',
  79. iconClass: {
  80. valid: 'icon-ok',
  81. invalid: 'icon-remove'
  82. }
  83. });
  84. });
  85. </script>
  86. </body>
  87. </html>