JQuery PreventDefault не остановить выполнение

Question

я должен вставить код первого

$(document).ready(function(){ 
    $("#submit").click(function(e){          
     $(".error").hide(); 
     var hasError = false; 

     .... .... 

     var captcha = $("#captchacode").val(); 
     if(captcha == '') { 
      $("#captchacode").after('<span class="error">You forgot to enter security image.</span>'); 
      hasError = true; 
     } else { 

      $.post("/checkcaptcha.php", 
       { captchac: captcha}, 
        function(data){ 

         if (data == "Invalid"){ 
          $("#captchacode").after('<span class="error">Invalid security text. Please try again</span>'); 
          hasError = true; 
          e.preventDefault(); 
         } 
        } 
      ); 
     } 


     if(hasError == false) { 
      $(this).hide(); 
      $("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />'); 

      $.post("/sendemail.php", 
       { emailFrom: emailFromVal, name: name, message: messageVal }, 
        function(data){ 
         $("#sendEmail").slideUp("normal", function() {     

          $("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>');           
         }); 
        } 
       ); 
     } 

     return false; 
    });       
}); 

Все работает. Электронная почта отправляется. Я получаю сообщение об ошибке при установке недопустимого значения captcha. Сразу после появления сообщения об ошибке он переходит в следующий шаг, и форма отправляется. Мне нужно ваше предложение исправить это.

Спасибо.

Answer 1

Функция jQuery.post() является сокращением для вызова AJAX. AJAX-вызовы асинхронны и работают путем передачи обратных вызовов, которые выполняются при завершении запроса. Вызов $.post()не прекратить выполнение кода до тех пор, пока запрос не получит ответ, потому что вся точка AJAX для этого не. Это означает, что ваша линия if(hasError == false) выполнит доif (data == "Invalid") часть вашей функции обратного вызова.

Если вы хотите что-то произойдет после ответа от вызова AJAX, то вам нужно, чтобы переместить его в функцию обратного вызова:

$(document).ready(function() { 
    $("#submit").click(function (e) { 
     $(".error").hide(); 
     var hasError = false, 
      elem = this; 

     ........ 

     var captcha = $("#captchacode").val(); 
     if (captcha == '') { 
      $("#captchacode").after('<span class="error">You forgot to enter security image.</span>'); 
      hasError = true; 
     } else { 

      $.post("/checkcaptcha.php", { 
       captchac: captcha 
      }, 

      function (data) { 

       if (data == "Invalid") { 
        $("#captchacode").after('<span class="error">Invalid security text. Please try again</span>'); 
        hasError = true; 
        e.preventDefault(); 
       } else { 
        $(elem).hide(); 
        $("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />'); 

        $.post("/sendemail.php", { 
         emailFrom: emailFromVal, 
         name: name, 
         message: messageVal 
        }, 

        function (data) { 
         $("#sendEmail").slideUp("normal", function() { 

          $("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>'); 
         }); 
        }); 
       } 
      }); 
     } 
     return false; 
    }); 
});