Question

使用模块和插件jquery-validate。

但是插件只在第二次运行模态窗口后才开始工作。我不明白为什么会这样。

＆＃13;

// 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 = "<div class=\"alert alert-success\" role=\"alert\"> <strong>Well done!</strong> You successfully read this important alert message. </div>";
          $(".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)'
         }
       },
     }
   }); 
 }

＆＃13;

.callback-modal {
  display: none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.js"></script>
</head>
<body>
<div class="wrap">
  <a href="#request" class="modalbox">cb form</a>
  
  <div id="request" class="callback-modal">
    <div class="callback-modal__inner">
      <form class="callback__form" id="callbackForm">

        <div class="form-row">                            
          <input type="text" name="name" id="r-name" placeholder="Name" class="input" data-rule-required="true">                            
        </div>

        <div class="form-row">                            
          <input type="text" name="phone" id="r-phone" placeholder="Phone" class="input" data-rule-required="true" data-rule-minlength="5">                            
        </div>

        <div class="form-row">                            
          <input type="text" name="email" id="r-email" placeholder="E-mail" class="input" data-rule-required="true" data-rule-email="true">                            
        </div>

        <input type="submit" value="Send" class="btn btn__submit">

        <div class="fancybox"></div>
      </form>
    </div>
  </div>  
</div>
  
  
</body>
</html>

＆＃13;

这必须是：

如果表单未通过验证，则提交按钮已禁用，而不是在发送数据时。
如果表格没事，则提交给。

如何解决这个问题？

验证插件仅在第二次运行后开始工作

0 个答案: