Ajax 表单提交忽略表单 onsubmit()答案

【问题标题】：Form onsubmit() being ignored by Ajax form submissionAjax 表单提交忽略表单 onsubmit()
【发布时间】：2017-09-05 14:18:20
【问题描述】：

我有两个 javascript，一个用于表单验证，一个用于表单提交。当我以“正常”方式提交表单时，没有 ajax，表单验证脚本运行完美。现在我添加了 ajax 表单提交，表单 onSubmit="validateContactForm();"被忽略了

表单html

        <form name="frm-form" id="id-form" onsubmit="validateContactForm();">
        <input type="text" class="formbox" name="frm-name" id="id-name" placeholder="Your Name" />
        <input type="text" class="formbox" name="frm-company" id="id-company" placeholder="Company Name" />
        <input type="text" class="formbox" name="frm-email" id="id-email" placeholder="Email Address" />
        <input type="text" class="formbox" name="frm-phone" id="id-phone" placeholder="Telephone Number" />
        <textarea class="textarea" name="frm-message" id="id-message" placeholder="Your Message"></textarea>            
        <input type="submit" name="frm-send" id="id-send" value="Send Message" class="btn-standard" />
        <div id="div-form-message"></div>    
        </form>

表单提交脚本

$(function(){
$('#id-form').on('submit', function(e)
    {
    e.preventDefault();
    var post_url = "send-message.asp";
    var method = "POST";
    var form_data = $(this).serialize();
    $.ajax({
        url: post_url,
        type: method,
        data: form_data,
        success: function(data) {               
            //
        },
        error: function() {
            //
        }
    });
});
});

表单验证脚本

function validateContactForm()  
{
return true if validation is met;
return false if validation isnt met;
}

两个脚本单独运行良好，但不能一起运行。

【问题讨论】：

可能会被跳过，因为 ajax 先运行。将 async false 添加到 ajax 方法并将您的函数调用移到它上面
尝试在你的函数中放置一个断点，看看当你提交表单时函数是否被命中。
显示您的 validateContactForm()

标签： jquery html ajax

【解决方案1】：

您可以在表单提交脚本中调用自定义验证器。这样您仍然可以进行 ajax 调用并验证结果。

$(function(){
$('#id-form').on('submit', function(e)
    {
    e.preventDefault();
    if (validateContactForm() == true) {
      var post_url = "send-message.asp";
      var method = "POST";
      var form_data = $(this).serialize();
      $.ajax({
          url: post_url,
          type: method,
          data: form_data,
          success: function(data) {               
              //
          },
          error: function() {
              //
          }
      });
    }
});
});

我怀疑e.preventDefault() 正在阻止您的 onsubmit 处理程序工作。提交表单被视为一个事件。

【讨论】：