Question

我有一个带有非常简单的验证片段的表单一个简单的AJAX调用，除非我尝试将两者组合在一起遇到问题。如果我把验证片段放在前面 AJAX调用验证工作，但AJAX调用根本不提交。如果我在验证之前放置AJAX调用，那么AJAX调用就可以了验证没有。我真的迷路了，几个小时以来一直在敲我的脑袋这个。非常感谢任何帮助！

$("#headerForm").submit(function(){

    var validate = true;      
    $("#headerForm :input").each(function(){                   
        var $this = $(this);                           
        if(this.id == "phoneNumber" && $this.val().length < 10 ){     
            alert("Please enter a valid phone number");
            validate = false;
            return false;        
        } else if(!this.value.length){           
            alert("field is required");
            validate = false;
            return false;  
        }           
    });
    return validate;

var name = $("#name").val();
    var phone = $("#phone").val();

    var dataString = 'name='+ name + '&phone=' + phone; 

    $.ajax({  
      type: "POST",  
      url: "/bin/headerForm",  
      data: dataString,  
      success: function() {  
        $('#headerForm').html("<div id='message'>Thank you</div>");  
      }  
    });  
    return false; 
 });

Answer 1

最佳做法是将验证代码移动到函数中，然后在提交处理程序中调用它：

function validateForm() {
    var validate = true;
    $("#headerForm :input").each(function () {
        var $this = $(this);
        if (this.id == "phoneNumber" && $this.val().length < 10) {
            alert("Please enter a valid phone number");
            validate = false;
            return false;
        } else if (!this.value.length) {
            alert("field is required");
            validate = false;
            return false;
        }
    });
    return validate;
}

然后提交处理程序：

$("#headerForm").submit(function () {

    if (validateForm()) {
        var name = $("#name").val();
        var phone = $("#phone").val();

        var dataString = 'name=' + name + '&phone=' + phone;

        $.ajax({
            type: "POST",
            url: "/bin/headerForm",
            data: dataString,
            success: function () {
                $('#headerForm').html("<div id='message'>Thank you</div>");
            }
        });
    }
    return false;
});

jQuery验证与AJAX调用冲突

1 个答案: