在JavaScript表單提交沒有采取e.preventDefault（）函數

Question

當提交按鈕被點擊時我想驗證表單，並在ajax調用要檢查captcha是否正確或不。如果它不正確，然後想要一個錯誤消息和防止表單提交。

這裏是我的javascript代碼

$(document).on("click","#submit-reservation",function(e){ 
    if($('#myform').isValid()){ 

     var cval = $('#captcha-input').val(); 
     var dataString = 'captachacheck=true&cval='+cval; 
     $.ajax({ 
     type: "POST", 
     url: "{/literal}{$smarty.session.siteloc}reservation/checkcaptcha/{literal}", 
     data: dataString, 
     cache: false, 
     success: function (data) { 
      console.log(data.status); 
      if(data.status == "error"){ 
      $("#captcha-wrap").append('<span class="help-block form-error" style="color: red;"> * Invalid Captcha</span>'); 
      e.preventDefault(); 
      } 
      else{ 
      $('#submit-reservation').click(); 
      } 


     } 
     }); 

    } 


    }); 

Answer 1

我在你的形式猜，你必須提交按鈕聲明爲： -

​​

即使你已經添加的事件處理程序，Ajax調用是異步結果e.preventDefault將無法工作，因爲表單會一直提交到那時。

使用

<button id="submit-reservation">Submit</button> 
<input type="submit" id="submitForm" hidden> 

而且在Ajax調用： -

 if(data.status == "error"){ 
     $("#captcha-wrap").append('<span class="help-block form-error" style="color: red;"> * Invalid Captcha</span>'); 

     } 
     else{ 
     $('#submitForm').trigger("click"); 
     } 

給你當從你的電話

Answer 2

使用返回錯誤提交觸發提交觸發事件，將預防功能置於ajax之外

$(document).on("click","#submit-reservation",function(e){ 
    e.preventDefault(); 
    if($('#myform').isValid()){ 

     var cval = $('#captcha-input').val(); 
     var dataString = 'captachacheck=true&cval='+cval; 
     $.ajax({ 
     type: "POST", 
     url: "{/literal}{$smarty.session.siteloc}reservation/checkcaptcha/{literal}", 
     data: dataString, 
     cache: false, 
     success: function (data) { 
      console.log(data.status); 
      if(data.status == "error"){ 
      $("#captcha-wrap").append('<span class="help-block form-error" style="color: red;"> * Invalid Captcha</span>'); 

      } 
      else{ 
      $('#submit-reservation').closest('form').submit(); 
      } 


     } 
     }); 

    } 


    });