Использование validate.js с Twitter Bootstrap

Question

Я использую Twitter Bootstrap v3.3.4 для создания модальной формы входа. Я хочу использовать плагин validate.js для jQuery для проверки формы перед отправкой данных через AJAX. Однако даже при написании минимального скрипта с использованием плагина я не получаю никакой ошибки из проверки.

Ниже вы найдете разметку HTML вместе с скриптом validate.js (версия 1.13.1). Заранее спасибо.

$(document).ready(function(){ 
    $("#loginButton").on("click",function(){ 
     //alert("logining in...."); 
     //jQuery Validate Plugin: http://jqueryvalidation.org/ - 24/05/2015 
     $("#loginModal").validate({ 
      rules:{ 
       username:{ 
        required:true, 
        minlength:6 
       }, 
       password:{ 
        required:true, 
        minlength:6 
       } 
      } 
     }); 
    }); 
}); 


<div class="modal" id="loginModal" role="dialog" aria-labelledby="loginModalWindowLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button class="close" type="button" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title" id="loginModalWindowLabel">Sign In</h4> 
      </div> 
      <div class="modal-body"> 
       <form onsubmit="return false;" id="loginForm"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="form-group"> 
          <label class="control-label" for="username">Username</label> 
          <input class="form-control" id="username" name="username"> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="form-group"> 
          <label class="control-label" for="password">Password</label> 
          <input class="form-control" id="password" name="password"> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="form-group"> 
          <button type="button" id="loginButton" class="bbcModalbutton pull-right">Login</button> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         <a href="#">Unable to access your account?</a> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         Don't have an account? <a href="#">Register FREE</a> 
        </div> 
       </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

сильный текст

Answer 1

потому, что ваш Логин модальный не в DOM все же, его будущий элемент, вам необходимо вызвать это на другой синтаксис:

$(document).on("click", '#loginButton', function(){ 
//your code 
} 

Вот fiddle demonstrating the effect

Answer 2

Примерно через полчаса назад и вперед я наконец решил его. Если вы посмотрите на мой оригинальный пост, вы увидите, что у меня была кнопка входа в систему, как тип «Кнопка». По какой-то причине, когда я изменил его, введите тип, и он сработал. Я не понимаю, почему, но это работает.

Спасибо За вашу помощь!

Answer 3

Во-первых, плагин автоматически фиксирует событие щелчка type="submit"button или input. Ничего не происходит, если атрибут type не установлен в submit.

Во-вторых, вам не нужно ставить .validate() внутри click обработчика, так как метод .validate() используется только для инициализации плагин. Затем после инициализации событие click кнопки отправки автоматически записывается. (И вам не нужен встроенный обработчик событий onsubmit.)

$(document).ready(function() { 

    $("#loginModal").validate({ // <-- initialize plugin 
     // rules & options 
     .... 

id из ваших form, LoginForm не соответствует селектору вы прикрепленный к .validate(), #loginModal.

Закрепление все, что ...

Работа DEMO: http://jsfiddle.net/654o4wgd/