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調用衝突

回答

相關問題