模态表单未验证并关闭提交 jquery 验证器答案

【问题标题】：Modal form not validated and closing on submit jquery validator模态表单未验证并关闭提交 jquery 验证器
【发布时间】：2020-06-03 08:04:12
【问题描述】：

我有一个使用 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) {
    }
  });
});

【问题讨论】：

标签： javascript jquery jquery-validate

【解决方案1】：

代码中有两个问题...

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

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

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

您在调用.validate() 之前调用了.valid()。
您在 submit() 处理程序内调用 .validate()。

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

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

jQuery(function() { // document ready event

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

演示：jsfiddle.net/d67twLr8/1/

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

【讨论】：