使用jQuery serialize与formvalidation.io时如何防止表单重复提交？

我之前碰到过类似的问题，大概率是formValidation的默认提交逻辑和你自定义的jQuery serialize提交逻辑冲突了，导致触发了两次请求。下面给你两种靠谱的解决方案：

formValidation库在验证通过后，默认会触发表单的原生提交事件；如果你同时又手动绑定了表单的submit事件并执行AJAX提交，就会导致两次提交请求（一封来自formValidation的默认提交，一封来自你的自定义AJAX），最终出现两封邮件的情况。

解决方案1：使用formValidation的submitHandler配置项（推荐） #

直接在formValidation的配置里定义验证通过后的提交逻辑，替代单独绑定submit事件的写法，这样能让验证和提交逻辑完全联动，避免冲突。

$(document).ready(function() {
  $('#ContactForm').formValidation({
    // 你的验证规则配置
    fields: {
      name: {
        validators: {
          notEmpty: { message: '姓名不能为空' }
        }
      },
      email: {
        validators: {
          notEmpty: { message: '邮箱不能为空' },
          emailAddress: { message: '邮箱格式不正确' }
        }
      }
      // 其他字段验证规则...
    },
    // 关键：用submitHandler接管验证后的提交逻辑
    submitHandler: function(form, validator) {
      // 阻止表单原生提交
      event.preventDefault();
      // 序列化表单数据
      var formData = $(form).serialize();
      // 执行自定义AJAX提交
      $.post('你的提交接口URL', formData, function(response) {
        // 提交成功后的处理，比如提示用户
        alert('表单提交成功！');
      }).fail(function() {
        // 提交失败的处理
        alert('提交失败，请稍后重试');
      });
    }
  });
});

解决方案2：手动控制验证与提交的触发逻辑 #

如果你坚持要单独绑定submit事件，需要先手动触发formValidation的验证，确认通过后再执行AJAX提交，同时阻止所有默认提交行为：

$(document).ready(function() {
  var $contactForm = $('#ContactForm');
  
  // 初始化formValidation
  $contactForm.formValidation({
    fields: {
      // 你的验证规则...
    }
  });

  // 绑定表单提交事件
  $contactForm.on('submit', function(e) {
    // 先阻止所有默认提交行为
    e.preventDefault();
    // 获取formValidation实例
    var validator = $contactForm.data('formValidation');
    // 手动触发验证
    validator.validate();
    // 只有验证通过时才执行AJAX提交
    if (validator.isValid()) {
      var formData = $(this).serialize();
      $.post('你的提交接口URL', formData, function(response) {
        // 处理提交响应
      });
    }
  });
});

• 检查代码中是否多次绑定了表单的submit事件（比如在多个JS文件中重复绑定）
• 确认formValidation配置中没有开启重复触发提交的额外选项（比如某些自定义的autoSubmit配置）

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