jQuery-validate验证一个页面存在多个from表单。

最初只有一个from的时候一直是这样校验的（校验规则请根据需求自行填写）：

$("#form1").validate({
  onkeyup: false,
  rules:{},
  messages: {},
  focusCleanup: true
});

后来加到两个from，发现上述方法只对一个from生效，写成如下这样也不好使，依然只生效一个：

$("#form1").validate({
   onkeyup: false,
   rules:{},
   messages: {},
   focusCleanup: true
});
$("#form2").validate({
  onkeyup: false,
  rules:{},
  messages: {},
  focusCleanup: true
});

没办法，奈何水平有限，还得面向百度开发，废话不多，直接上代码。

html

<div class="main-content">
    <form id="form1" class="form-horizontal">
        <h4 class="form-header h4">表单一</h4>
        <div class="row">
            <div class="col-sm-8">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">表单一：</label>
                    <div class="col-sm-8">
                        <input id="name" name="name" placeholder="请输入名字" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-offset-5 col-sm-12">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i> 保 存</button>&nbsp;
                <button type="button" class="btn btn-sm btn-success" onclick="closeItem()"><i class="fa fa-upload"></i> 启 用 </button>
            </div>
        </div>
    </form>

    <form id="form2" class="form-horizontal">
        <h4 class="form-header h4">表单二</h4>
        <div class="row">
            <div class="col-sm-8">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">表单二：</label>
                    <div class="col-sm-8">
                        <input id="phone" name="phone" placeholder="请输入手机号" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-offset-5 col-sm-12">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler1()"><i class="fa fa-check"></i> 保 存</button>&nbsp;
                <button type="button" class="btn btn-sm btn-success" onclick="closeItem()"><i class="fa fa-upload"></i> 启 用 </button>
            </div>
        </div>

    </form>
</div>

js

function submitHandler() {
  $("#form1").validate({
    rules: {},
    messages: {},
    submitHandler: function (form) {
      console.log(form)
    },
  })
  $('#form1').submit();
}
function submitHandler1() {
  $("#form2").validate({
    rules: {},
    messages: {},
    submitHandler: function (form) {
      console.log(form)
    },
  })
  $('#form2').submit();
}