In Javascript Formularübermittlung nicht genommen e.preventDefault() -Funktion

Question

Wenn Sie auf die Schaltfläche klicken geklickt Ich möchte das Formular validieren und in Ajax Anruf überprüfen möchten, Captcha ist korrekt oder nicht.Wenn es nicht korrekt ist dann wollen eine Fehlermeldung und Formularübertragung verhindern.

Hier ist mein Javascript-Code

$(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

ich in Ihrem Formular erraten, haben Sie Taste erklärt einreichen, wie: -

<input type="submit" id="submit-reservation"> 

Auch wenn Sie Ereignishandler hinzugefügt haben, ist die Ajax-Aufruf asynchron und als Ergebnis funktioniert e.preventDefault nicht, weil das Formular bis dahin übermittelt werden würde.

Verwenden

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

Und in Ajax-Aufruf: -

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

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

Hier sind Sie das Ereignis auslösen, wenn kein Fehler von Ihrem Anruf

Answer 2

Verwendung submit auszulösen zurückgeführt wird, Platzieren Sie die Präventionsfunktion außerhalb des 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(); 
      } 


     } 
     }); 

    } 


    });