如何防止AJAX post發送數據，如果在表單中有任何驗證錯誤？

我想提交數據使用JQuery AJAX（使用以下腳本），它工作正常，但問題是它提交數據，即使在我的表單中有一些驗證錯誤。我正在使用jQuery驗證插件1.7來驗證我的表單。如何防止AJAX post發送數據，如果在表單中有任何驗證錯誤？

所以我的問題是有什麼辦法來阻止AJAX發佈數據，如果我的表單中有任何驗證錯誤？

謝謝:)

<script type="text/javascript"> 
    $(document).ready(function(){ // added 
$('#submit_item').click(function(){ 

    var teacherid = $('#teacherid').val(); 
    var salary_amount = $('#salary_amount').val(); 



$.ajax({ 

    type: "POST", 
    url: "<?php echo base_url(); ?>addteacher_salary/add_ajax", 
    data: "teacherid="+teacherid+ "&salary_amount="+ salary_amount, 
    success: function(html){ 
    $("#show").html(html); 


    } 
}); 

return false 
}); 
}); // added 
</script>

來源

2011-12-23 black_belt

可以添加一個鏈接驗證腳本使用？ – ManseUK 2011-12-23 16:00:14

上面的代碼沒有調用任何驗證。 – 2011-12-23 16:01:51

永遠不要使用return false;在jQuery中，除非您試圖阻止事件的即時傳播並阻止其默認行爲。使用event.preventDefault（）取而代之，如果你只是想阻止事件的默認動作：http://api.jquery.com/event.preventDefault/ – brandwaffle 2011-12-23 16:05:21

這工作正常：（EDITED）

HTML：

<form action="index.html" id="myForm" method="post"> 
<span>Salary: </span> 
<input type="text" id="salary_amount" class="required" /> 
<input type="submit" id="submit_item" Value="Submit" /> 
</form>

JS：

$(document).ready(function(){ 

    $("#submit_item").click(function(e){ 
    e.preventDefault(); 
    if($("#myForm").validate().form()) 
    { 
     alert('DO AJAX POST'); 
    } 
    else 
    { 
     alert('INVALID DATA'); 
    } 
    });//submit--click 
});//ready

試試：http://jsfiddle.net/jlrvpuma/ksbpY/2/

來源

2011-12-23 18:10:23 jlrvpuma

謝謝jlrvpuma。我試過你的腳本，但仍然沒有運氣..頁面只能重新加載。謝謝你的努力.. :) – 2011-12-23 19:20:51

真的我的邏輯錯了。這個例子工作正常：http://jsfiddle.net/jlrvpuma/ksbpY/ – jlrvpuma 2011-12-23 19:47:21

我編輯了我的第一個答案。 – jlrvpuma 2011-12-23 19:52:38

<script type="text/javascript"> 
    $(document).ready(function(){ // added 

    $('#myForm').validate(); 

    $('#submit_item').click(function(){ 

     var teacherid = $('#teacherid').val(); 
     var salary_amount = $('#salary_amount').val(); 


     if($('#myForm').valid()) { 
      $.ajax({ 

       type: "POST", 
       url: "<?php echo base_url(); ?>addteacher_salary/add_ajax", 
       data: "teacherid="+teacherid+ "&salary_amount="+ salary_amount, 
       success: function(html){ 
       $("#show").html(html); 


       } 
      }); 
     } 

     return false 
    }); 
}); // added 
</script>

轉出#myForm爲表單的ID。我沒有測試過，但它應該足以讓你朝着正確的方向前進。

來源

2011-12-23 17:08:03 Jrod

感謝Jrod的回覆。我試過你的代碼，但這次頁面只重新加載而沒有提交任何數據作爲我的表單行動=「」 – 2011-12-23 17:31:23

如何防止AJAX post發送數據，如果在表單中有任何驗證錯誤？

回答

相關問題