jQuery 表单验证提交时间过长答案

【问题标题】：jQuery form validation taking too long on submitjQuery 表单验证提交时间过长
【发布时间】：2013-07-02 12:51:43
【问题描述】：

有一个相当复杂的 php POST 表单，使用 jQuery 进行大量数据验证，如下所示。但是，我遇到了一些问题，因为似乎在验证完成之前提交了表单。

问题：验证是否可能需要很长时间，以至于在 jQuery 甚至返回 true 或 false 之前默认提交表单？如果是这样，处理这个问题的最佳方法是什么？

jQuery('#order-form').submit(function(){

// Validate many different fields in various ways

if (valid)
   return true;
else
   return false;

});

【问题讨论】：

这么长有多长？当您的代码出现错误时，通常会发生不需要的提交。
您是通过 ajax 提交表单吗？
你能发布真正的代码，特别是if(valid) 部分 - 我想看看它是如何验证的。我认为完成它可能需要很长时间才能提交
您的表单验证似乎有错误。尝试在 jsfiddle 上复制您的代码。在 SO 上获得确切答案。
在事件对象上调用 .preventDefault()。

标签： php jquery validation

【解决方案1】：

由于我们看不到您的代码以及它是如何验证的，也许您可以通过其他方式尝试您的功能。尝试使用提交按钮上的点击功能来验证您的商品，如果一切正常，请提交。

例如

$('#btn1').click(function(e){
    var valid

    if($('#ex1').val() == ""){
        valid = false;
    }else{
         valid = true;   
    }

    if(valid){
        $("#testform").submit();
    }else{
         alert("not validated");  
    }

    e.preventDefault();
});

以小提琴为例。

http://jsfiddle.net/em62Z/1/

我也使用这个插件来验证我的表单。它可以验证任何大小的表单，甚至是一些复杂的字段。

https://github.com/posabsolute/jQuery-Validation-Engine

它运作良好，如果您自己进行验证，可能会省去您自己验证的麻烦。

【讨论】：

【解决方案2】：

这里是代码 sn-p 作为联系表单的示例，可以帮助您，我使用 jqueryvalidation.org 插件和使用 ajax 发布表单

$(function() {

        var form = $("#contact_form").validate();

        $('#progressbar').hide();     
        $('#success').hide();
        $('#failure').hide();

    $(document).ajaxStart(function() {
       $( "#progressbar" ).show();
     });
    $(document).ajaxStop(function() {
       $( "#progressbar" ).hide();
     });


    $("form#contact_form").submit(function() {
        if(form.valid())
        {   
          //any other validations here

          var name = $("#txtName").val();
          var email = $("#txtEmail").val();
          var phone = $("#txtPhone").val();
          var message = $("#txtMessage").val();

          $.ajax({
            url: "process_contact.php",
            type: "POST",
            data: {'name': name,
                    'email': email,
                    'phone': phone,
                    'message': message},
            dataType: "json",
            success: function(data) {
                  if(data.status == 'success')
                  {
                        $('#contact_form').hide();                                
                        $('#success').show();
                  }
                  else if(data.status == 'error')
                  {
                        $('#failure').show();
                  }
                }

      });
      return false;
        }
    });
  });

【讨论】：

【解决方案3】：

据我所知，你的情况只有两种可能发生：

您的验证代码有错误，或者
javascript 已关闭。

关于客户端验证，您是否尝试过 jQuery Validation？它在两个事件中验证表单中的每个元素：

每次元素都会更改，并且
提交表单时。

您还可以添加自定义方法来对每个元素中的每个条件进行唯一验证。

有关 jQUery 验证的更多信息和示例（使用和不使用 ajax）：here。

【讨论】：