Почему вызов плагина jquery-validate происходит со второго раза?

#javascript #jquery #валидация

Пытаюсь сделать валидацию формы с помощью плагина jquery-validate:



// Callback forms
(function(){

  var app = { 

    init: function(){
      this.setUpListeners();
    },

    setUpListeners: function(){

      $(document).on('submit', 'form', this.submitForm);
      $(document).on('keyup', 'input', this.removeError);
    },

    submitForm: function(e){
      e.preventDefault();

      var form = $(this),
          btnSubmit = form.find('[type="submit"]');

      if(app.validateForm(form) === false) return false;


      btnSubmit.addClass('disabled');

      var str = form.serialize();

      $.ajax({
        url: 'contacts.php',
        type: 'post',
        data: str
      }).done(function(msg){

        if(msg === "OK"){
          var res = "
 Well
done! You successfully read this important alert message. 
";
          $(".fancybox").html(res);

          setTimeout(function(){
            $.fancybox.close();
          }, 2000)

          console.log('ok');

          $(".fancybox").fancybox().trigger('click');
        }else {
          $(".fancybox").html(msg);

          $(".fancybox").fancybox().trigger('click');
        }                    

      }).always(function(){
        btnSubmit.removeAttr('disabled', '');                    
      });
    },

    validateForm: function(form){
      var inputs = form.find('input'),
          valid = true;
      
      
      form.validate({
        invalidHandler: function(event, validator){
          var errors = validator.numberOfInvalids();
          if (errors) {
            valid = false;
          } else {
            console.log('valide');
          }
          
          validator.focusInvalid();
        }
      });

      return valid;
    },

    removeError: function(){
      var $this = $(this),
          formGroup = $this.closest('.form-group');

      formGroup.removeClass('has-danger');
    }
  }

  app.init();
})();

 if($(".modalbox").length){
   $(".modalbox").fancybox({
     fitToView   : false,
     autoSize    : false,
     closeClick  : false,
     maxWidth    : 502,
     maxHeight   : 444,
     prevEffect		: 'none',
     nextEffect		: 'none',
     padding     : 0,
     margin      : 50,
     closeBtn		: false,
     helpers : {
       overlay : {
         css : {
           'background' : 'rgba(0, 0, 0, 0.72)'
         }
       },
     }
   }); 
 }
.callback-modal {
  display: none;
}



  
  
  

  
  
  
  



  Оформить заявку
  
  

    

      


        
                            
                                      
        

        
                            
                                      
        

        
                            
                                      
        

        
                            
          
                           
        

        

        

      
    
  
  

  
  






Но не могу понять, почему срабатывает проверка, только со второго раза? Возможно
кто-то работал с данным плагином.

Как можно исправить модуль, чтобы плагин срабатывал и срабатывал как положено (если
поля не заполнены, форма не отправляется отображаются error поля, если все в порядке,
то отправляются данные)?
    

Ответы

Ответ 1

В данном случае происходит неверное использование плагина. Перед тем как использовать
что-то, это что-то надо инициализировать.

По аналогии, рассчитывать, что сработает this.submitForm при отправке формы, не вызвав
app.init.



Далее, сама инициализация, выполнена не совсем корректна.

В документации к плагину можно увидеть, что свойство invalidHandler нужно для выполнения
своего кода в случае если валидация не прошла. В коде в вопросе, в этом методе идет
выставление переменной valid, которая в коде используется для определения того, прошла
валидация или нет.

Вместо это нужно было использовать метод form, который как раз возвращает результат
проверки, без дополнительных переменных.

В итоге метод validateForm: function(form){ можно удалить и заменить его использование
на одну строку 

form.validate().form()


В этом случае плагин не будет инициализирован дважды и более раз, ввиду наличия проверки
внутри самого плагина.

Пример:



// Callback forms
(function() {

  var app = {

    init: function() {
      this.setUpListeners();
    },

    setUpListeners: function() {

      $(document).on('submit', 'form', this.submitForm);
      $(document).on('keyup', 'input', this.removeError);
    },
    submitForm: function(e) {
      e.preventDefault();
      var form = $(this),
        btnSubmit = form.find('[type="submit"]');

      if (form.validate().form() === false) return false;


      btnSubmit.addClass('disabled');

      var str = form.serialize();

      $.ajax({
        url: 'contacts.php',
        type: 'post',
        data: str
      }).done(function(msg) {

        if (msg === "OK") {
          var res = "
 Well
done! You successfully read this important alert message. 
";
          $(".fancybox").html(res);

          setTimeout(function() {
            $.fancybox.close();
          }, 2000)

          console.log('ok');

          $(".fancybox").fancybox().trigger('click');
        } else {
          $(".fancybox").html(msg);

          $(".fancybox").fancybox().trigger('click');
        }

      }).always(function() {
        btnSubmit.removeAttr('disabled', '');
      });
    },

    removeError: function() {
      var $this = $(this),
        formGroup = $this.closest('.form-group');

      formGroup.removeClass('has-danger');
    }
  }

  app.init();
})();

if ($(".modalbox").length) {
  $(".modalbox").fancybox({
    fitToView: false,
    autoSize: false,
    closeClick: false,
    maxWidth: 502,
    maxHeight: 444,
    prevEffect: 'none',
    nextEffect: 'none',
    padding: 0,
    margin: 50,
    closeBtn: false,
    helpers: {
      overlay: {
        css: {
          'background': 'rgba(0, 0, 0, 0.72)'
        }
      },
    }
  });
}
.callback-modal {
  display: none;
}






  Оформить заявку

  

    

      


        

          
        

        

          
        

        

          
        

        

          
        

        

        

      
    
  



Ответ 2

Как я понял - нужно перед началом работы с валидацией проинициализировать validate
для формы. Т.е. вызвать $("form").validate() после загрузки DOM и скриптов. В вашем
примере я просто написал это перед app.init() (97 строка js) и форма начала работать
с 1ого раза.