jQuery验证与AJAX调用冲突

我有一个非常简单的验证片段以及一个简单的AJAX调用，除非当我试图把两个在一起我遇到问题。如果我将验证片段放在AJAX调用的前面，那么验证将起作用，但AJAX调用不会提交。如果我将AJAX调用放在验证之前，则AJAX调用将起作用，并且验证不会。我真的迷失了，并且一直在敲我的头几小时超过这一个。任何帮助是极大的赞赏！jQuery验证与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; 
});

来源

2013-05-13 Delmon Young

后一无所获'返回验证'正在执行。另外，'验证！=有效' – 2013-05-13 20:54:28

感谢回复@kevinb，但我是否把**返回验证**以运行验证？如果我删除它或将它移动到ajax调用下面，我只会得到一个提示提示（不是2），并且它会自动提交而不允许我返回并输入任何内容。一位新手所以代码例子会很棒！附：对不起，我更新的代码有效的错误是有效的。 – 2013-05-13 21:05:20

最好的做法是移动验证码成一个函数，然后把它提交处理程序：

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; 
});

来源

2013-05-13 21:04:42 Kerem

作品完美！谢谢@Kerem – 2013-05-13 21:42:05

jQuery验证与AJAX调用冲突

回答

相关问题