模态表单未验证并在提交 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

您的代码中有两个问题...

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

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

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

1. 您在调用.valid()之前调用了 .valid( .validate() 。

2. 您在submit()处理程序中调用.validate() 。

.validate()方法用于初始化表单上的插件，需要在调用.valid()之前调用。 但是，在这种情况下，绝对不需要submit处理程序或.valid()或.preventDefault() ，因为插件会自动捕获事件并阻止默认提交。

只需在页面就绪处理程序上调用.validate() ，其他一切都是自动的。 请注意，如果页面准备好后 DOM 中不存在form ，则在创建表单后立即调用.validate() 。

jQuery(function() { // document ready event

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

演示： jsfiddle.net/d67twLr8/1/

我也不知道为什么您的 .validate .validate()调用中有空白的success和submitHandler回调函数。 使用空的submitHandler ，当表单有效时不会发生任何事情。 完全删除它们以获取默认行为或使用您自己的功能覆盖......永远不要留空。