使用 jquery serialize 和 formvalidation.io 时如何防止表单重复发布？答案

【问题标题】：How do I prevent a form from double-posting when using jquery serialize and formvalidation.io?使用 jquery serialize 和 formvalidation.io 时如何防止表单重复发布？
【发布时间】：2018-09-13 09:07:17
【问题描述】：

我使用 formvalidation.io 库来验证脚本中的数据。它在进行正常的页面提交时工作得很好，但是当我选择使用 jquery 并序列化来提交它两次时。这可以在博客以及提交时发送的 2 封电子邮件中看到。如果我从 javascript 中注释掉 formvalidation，它会发布一次。我尝试重新组织和重新排列 javascript 无济于事。相关代码：

$(document).ready(function() {

  /* FORM-VALIDATION */
  $('#ContactForm').formValidation({
    framework: 'bootstrap',
    icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      'fname': {
        validators: {
          notEmpty: {
            message: 'The first name is required'
          },
          stringLength: {
            min: 2,
            max: 40,
            message: 'First name must be at least 2 characters long'
          }
        }
      },
      'lname': {
        validators: {
          notEmpty: {
            message: 'The last name is required'
          },
          stringLength: {
            min: 2,
            max: 40,
            message: 'First name must be at least 2 characters long'
          }
        }
      },
      'email': {
        validators: {
          notEmpty: {
            message: 'The email address is required'
          },
          emailAddress: {
            message: 'The input is not a valid email address'
          }
        }
      },
      'message': {
        validators: {
          notEmpty: {
            message: 'Message text is required'
          },
          stringLength: {
            min: 10,
            max: 1000,
            message: 'Your message must be between 10 and 1000 characters in length.'
          }
        }
      }
    }
  })
  /* FORM-VALIDATION */

  /* SERIALIZE & SUBMIT FORM */
  $(function() {
    var form = $('#ContactForm');
    var formMessages = $('#form-messages');
    $(form).submit(function(e) {
      e.preventDefault();
      var formData = $(form).serialize();
      $("#Result").html( "" );
      $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData,
        success: function(html) { $("#Result").html( html ); }
      });
    });
  });
  /* SERIALIZE & SUBMIT FORM */

});

您可以在以下位置观看现场演示：http://www.dottedi.biz/demo/code/public/serialize+formvalidation/

【问题讨论】：

标签： jquery post serialization formvalidation.io

【解决方案1】：

我将 SERIALIZE 代码更改为以下内容，它现在可以工作了：

/* SERIALIZE & SUBMIT FORM */
.on('success.form.fv', function(e) {
  var form = $('#ContactForm');
  var formMessages = $('#form-messages');
  $(form).submit(function(e) {
    e.preventDefault();
    var formData = $(form).serialize();
    $("#Result").html( "" );
    $.ajax({
      type: 'POST',
      url: $(form).attr('action'),
      data: formData,
      success: function(html) { $("#Result").html( html ); }
    });
  });
});
/* SERIALIZE & SUBMIT FORM */

【讨论】：