Question

我尝试使用jquery-validate plugin执行验证表单：

＆＃13;

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 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;

      form.validate({
        invalidHandler: function(event, validator){
          var errors = validator.numberOfInvalids();
          if (errors) {
            return false;
            btnSubmit.attr('disabled', 'disabled');

            console.log('false');
          } else {
            console.log('valide');
          }
        }
      });

      btnSubmit.attr('disabled', '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;

      // $.each(inputs, function(i, val){
      //     var input = $(val),
      //         val = input.val(),
      //         formGroup = input.closest('.form-row');                   

      //     if(val.length === 0){
      //         formGroup.addClass('has-danger');
      //         valid = false;
      //     } else {
      //         formGroup.addClass('has-success').removeClass('has-danger');
      //     }

      // });

      // return valid;
    },

    removeError: function(){
      var $this = $(this),
          formGroup = $this.closest('.form-group');

      formGroup.removeClass('has-danger');
    }
  }

  app.init();
})();

＆＃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/additional-methods.min.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">Оформить заявку</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="Имя" class="input" data-rule-required="true">                            
        </div>

        <div class="form-row">                            
          <input type="text" name="phone" id="r-phone" placeholder="Телефон" 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>

        <div class="form-row">                            
          <textarea name="msg" id="r-msg" placeholder="Описание сайта" class="input"></textarea>                            
        </div>

        <input type="submit" value="Отправить" class="btn btn__submit">

        <div class="fancybox"></div>
      </form>
    </div>
  </div>  
</div>
  
  
</body>
</html>

＆＃13;

控制台：

form.validate不是函数

但我无法理解错误以及如何解决它们。也许有人使用过这个插件。

如何修复模块按预期插入故障和故障（如果字段为空，表单未显示错误字段，如果一切正常，则发送数据）？

Answer 1

"form.validate is not a function"表示无法识别.validate()方法，因为您尚未包含该插件...

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.js"></script>

您已将additional-methods.js文件包含两次但未能包含jQuery Validate插件一次。

应该看起来像这样......

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.js"></script>

form.validate不是一个函数

1 个答案: