模态表单未被验证，并在提交时关闭jquery验证器。

Question

我有一个模态，我使用AJAX显示。只要我在模式中点击提交，它就会关闭，而且字段也没有被验证。

<div class="modal-header">
  <h4 class="modal-title">Contact Number</h4>
</div>
<div class="modal-body">
  <form method="post" id="user_verified_mobile">
    <input type="text" name="mobile_number" placeholder="Mobile Number" class="form-control" /><br />
    <input type="submit" name="submit" id="submit" class="btn btn-info" value="Verify" />
  </form>
</div>

jQuery('form#user_verified_mobile').on('submit', function(e) {
  if (!jQuery('form#user_verified_mobile').valid()) {
    e.preventDefault()
  }

  jQuery("form#user_verified_mobile").validate({
    rules: {
      mobile_number: {
        required: true
      },
    },
    messages: {
      mobile_number: {
        required: 'Please enter mobile number',
      }
    },
    success: function(label, element) {
    },
    submitHandler: function(form) {
    }
  });
});

Answer 1

我修改了一下你的代码，在点击按钮时调用一个函数。

这里是一个工作的fiddle。https:/jsfiddle.netusmanmunirqx2mae404

它正在验证用户是否输入手机号码。

表格

<div class="modal-header">
  <h4 class="modal-title">Contact Number</h4>
</div>
<div class="modal-body">
  <form method="post" id="user_verified_mobile">
    <input type="text" name="mobile_number" id="mobile_number" placeholder="Mobile Number" class="form-control" /><br />
    <button onclick="checkVal()" id="submit" class="btn btn-info">
    Verify
    </button>
  </form>
</div>

jQuery函数

function checkVal() {
    $("#user_verified_mobile").validate({
      rules: {
        mobile_number: {
          required: true
        },
      },
      messages: {
        mobile_number: {
          required: 'Please enter mobile number',
        }
      },
      success: function(label, element) {
        //do something
      },
      submitHandler: function(form) {
        //do something
      }
  })
}

Answer 2

你的代码有两个问题...

jQuery('form#user_verified_mobile').on('submit', function(e) {

    if (!jQuery('form#user_verified_mobile').valid()) { ...

    jQuery("form#user_verified_mobile").validate({ ...

1. 你在调用 .valid() 趁早 .validate().

2. 你在打电话 .validate() 内 submit() 处理器。

该 .validate() 方法用于 初始化 的插件，并且需要在调用 .valid(). 然而，完全没有必要 submit 搬运工 .valid() 或 .preventDefault() 在此 因为插件捕捉事件并自动屏蔽默认的提交。.

打电话给我吧 .validate() 的处理程序，其他的都是自动的。 注意，如果表单在页面准备时不存在于DOM中，那么调用 .validate() 紧接着 form 是创建。

jQuery(function() { // document ready event

    jQuery("form#user_verified_mobile").validate({ // initialize plugin on form
        ...

DEMO。 jsfiddle.netd67twLr81

我也不知道你为什么会有空白的地方 success 和 submitHandler 的回调函数。.validate() 呼叫。 随着一个空的 submitHandler当表单有效时，什么都不会发生。 完全删除它们作为默认行为或用你自己的函数覆盖......永远不要留空。