1

有一个相当复杂的 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;

});
4

3 回答 3

0

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

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

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

  1. 每次更改元素时，并且
  2. 提交表单时。

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

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

于 2013-07-22T05:53:53.817 回答
0

由于我们看不到您的代码及其验证方式，也许您可​​以以另一种方式尝试您的功能。尝试并使用提交按钮上的单击功能来验证您的项目，然后如果一切正常，请提交。

例如

$('#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

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

于 2013-07-02T14:25:35.607 回答
0

这是可以帮助您的联系表单示例的代码片段，我使用了 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;
        }
    });
  });
于 2013-07-02T14:30:28.493 回答