jQuery校验失败时AJAX表单仍提交的问题该如何解决？

核心错误原因 #

你调用的form.validate()是校验器初始化方法，返回的是校验器实例对象，永远为真值，因此你写的拦截逻辑永远不会触发，无法阻止校验失败的提交请求。判断表单是否通过校验需要调用对应校验库的校验结果判断方法。

场景1：使用jQuery官方Validation插件 #

如果你的项目引入的是jQuery官方的validation插件，需要修正两个点：

1. 输入框的规则属性写法不符合官方要求，调整为data-rule-*格式：

<input type="text" class="form-control" name="mobile" id="mobile" placeholder="mobile" data-rule-required="true" data-rule-number="true" data-rule-minlength="10" data-rule-maxlength="10">

2. 页面加载完成后先初始化表单校验，提交时用valid()方法判断校验结果
   完整的JS代码如下：

// 页面加载完成后初始化校验器
$(function() {
  $('#add-admin-form').validate();
});

$('#add-admin-form').on('submit', function(event){
  event.preventDefault();
  var form = $(this);
  // 校验不通过则终止提交
  if (!form.valid()) {
    return false;
  }

  // 校验通过后再执行AJAX提交
  $.ajax({
      url:"/submit-create-Admin-User",
      method:"POST",
      data:new FormData(this),
      dataType:'JSON',
      contentType: false,
      cache: false,
      processData: false,
      success:function(data)
      {
          if(data.status == 1 ) {
              $("#create_admin_modal").modal('hide');
              swal("Done", "Admin user added successfully.", "success");
              location.reload();
          } else if(data.status == -1 ) {
              swal("Ooops", data.message, "failure");
          } else {
              swal("Ooops", "Something went wrong. Please try again.", "failure");
          }
      },
      failure: function() { swal("Ooops", "Something went wrong. Please try again.", "failure");}
  })
});

场景2：使用jQuery Form Validator插件 #

如果你的项目引入的是jquery-form-validator（你的输入框data-validation属性写法符合这个库的规则），修正逻辑如下：

1. 页面加载完成后先初始化全局校验

$(function() {
  $.validate();
});

2. 提交时用isValid()方法判断校验结果，调整后的submit事件代码：

$('#add-admin-form').on('submit', function(event){
  event.preventDefault();
  // 校验不通过则终止提交
  if (!$(this).isValid()) {
    return false;
  }

  // 原有AJAX提交逻辑不变
  $.ajax({
      url:"/submit-create-Admin-User",
      method:"POST",
      data:new FormData(this),
      dataType:'JSON',
      contentType: false,
      cache: false,
      processData: false,
      success:function(data)
      {
          if(data.status == 1 ) {
              $("#create_admin_modal").modal('hide');
              swal("Done", "Admin user added successfully.", "success");
              location.reload();
          } else if(data.status == -1 ) {
              swal("Ooops", data.message, "failure");
          } else {
              swal("Ooops", "Something went wrong. Please try again.", "failure");
          }
      },
      failure: function() { swal("Ooops", "Something went wrong. Please try again.", "failure");}
  })
});

额外排查点 #

• 确认项目中只引入了一种表单校验插件，避免插件冲突导致方法失效
• 打开浏览器控制台检查是否存在JS报错，比如校验插件未正确引入、方法不存在等问题
• 确认校验规则配置符合业务需求，比如手机号长度规则如果适配国内手机号需要调整为11位

内容的提问来源于stack exchange，提问作者Alex