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

Posted 2023-05-09

【中文标题】使用 jquery serialize 和 formvalidation.io 时如何防止表单重复发布？

【英文标题】：How do I prevent a form from double-posting when using jquery serialize and 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/

【参考方案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 */