使用jQuery Validate的submitHandler时DirtyForms异常触发求助

我来帮你解决这个问题！你遇到的情况是因为在jQuery Validate的submitHandler里手动调用form.submit()时，DirtyForms没能正确识别这是正常的表单提交，误触发了脏表单的离开提示。

问题原因 #

DirtyForms默认会监听表单的提交事件，但jQuery Validate的submitHandler是在验证通过后绕开了默认提交流程，手动触发提交动作。这时候DirtyForms的监听逻辑依然会介入，把这次提交当成了“用户要离开页面”的操作，所以弹出了不符合预期的提示。

解决方案 #

这里提供几种可行的解决办法，优先推荐第一种精准控制的方案：

方案1：提交前标记表单为“干净”状态

在submitHandler里执行自定义操作后，先通过DirtyForms的API把表单标记为干净，再提交表单，这样就不会触发脏表单提示了：

$('.validate').validate({
  submitHandler: function (form) {
    // 先将表单标记为干净，让DirtyForms跳过检测
    $(form).dirtyForms('setClean');
    
    // 这里执行你的自定义操作
    // do a couple of things here, then...
    
    // 再提交表单
    form.submit();
  }
});

$('form[method="post"]').dirtyForms();

方案2：使用DirtyForms API忽略本次提交

通过$.DirtyForms.ignore方法包裹提交动作，让DirtyForms直接跳过本次操作的检测：

$('.validate').validate({
  submitHandler: function (form) {
    // 执行自定义操作后，用DirtyForms的方式提交，自动跳过检测
    $.DirtyForms.ignore(function() {
      form.submit();
    });
  }
});

$('form[method="post"]').dirtyForms();

方案3：全局忽略验证类表单

如果所有带有.validate类的表单都不需要在提交时触发DirtyForms提示，可以直接在初始化时配置忽略规则：

$('.validate').validate({
  submitHandler: function (form) {
    // 执行你的自定义操作
    // do a couple of things here, then...
    form.submit();
  }
});

$('form[method="post"]').dirtyForms({
  ignoreSelector: '.validate'
});

第一种方案是最推荐的，它只在合法提交的瞬间临时标记表单为干净，不会影响DirtyForms在用户真的要离开未提交页面时的提示功能。

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