Question

我有两个javascripts，一个用于表单验证，一个用于表单提交。当我以“正常”方式提交表单时，如果没有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;
}

这两个脚本都可以正常工作，但不能一起工作。

Answer 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处理程序工作。提交表格被视为事件。

表单onsubmit（）被Ajax表单提交忽略

1 个答案: