在AJAX之前阻止默認，表單仍然提交成功

Question

我正在嘗試使表單在提交之前需要某些事情纔是真實的。運行與阿賈克斯這裏有些問題..

$('form').submit(function(event){ 
    form = $(this); // I've tried just: this. Same result 
    material = $('#material'). val(); 
    hours = $('#hours'). val(); 

    // - Material and Hours are numbers 
    if(isNaN(material)) { 
     event.preventDefault(); 
     alert('Please enter a number for Material'); 
    } 
    if(isNaN(hours)) { 
     event.preventDefault(); 
     alert('Please enter a number for Hours'); 
    } 


    event.preventDefault(); 
    $.ajax({ 
     url : 'page.php', 
     data : { 
      'id' : {{ id }} 
     }, 
     type : 'post', 
     dataType: "json", 
     success : function(data){ 
      console.log(data); 
      if(data.job_num == {{ job_id }}) { 
       form.submit(); 
      } else { 
       alert('Please enter a valid number'); 
      } 
     }, 
     error: function(){ 
      alert('Please enter a valid number');      
     } 
    }); 

}); 

正如你所看到的，hours可能是NaN和窗體不會提交..但是當它到達了ajax，如果它是成功的，表單將提交即使hours仍然NaN ..

我試圖把阿賈克斯if陳述，相同的結果之前..不知道這是一些簡單的我俯瞰，或者如果它真的這個複雜..

Answer 1

放一個return;之後你錯誤alert()它會結束事件功能沒有metter什麼。

event.preventDefault()將阻止提交form，而不是要執行的其餘功能，這就是爲什麼您的ajax請求繼續執行。