Не удается получить обратный вызов ajax для функции

Question

У меня есть форма для регистрации пользователем новой учетной записи. Я использую jquery + ajax для проверки доступности адреса электронной почты при отправке формы. В коде JQuery я использовал e.preventDefault(); для предотвращения подачи формы при возникновении какой-либо ошибки. Я попробовал существующий адрес электронной почты в сообщении электронной почты и нажал кнопку Отправить форму. Это позволяет форме подать. Он не должен делать этого, потому что ajax reponseText return true означает, что адрес электронной почты уже существует в базе данных.

Может ли кто-нибудь рассказать мне, как исправить мой код, чтобы, если ответ ajax возвращает true, он предотвратит отправку формы и обнаружит ошибки.

Я пробовал читать и следить за this article, но терпеть неудачу после стольких попыток.

Вот моя форма:

<form role="form" method="post" id="signupForm" action="index.php?view=signup-gv"> 
       <div class="col-xs-6 border-right"> 
        <div class="form-group"> 
         <label for="exampleInputEmail1">Full Name</label> 
         <input type="text" class="form-control" id="regname" name="regname" placeholder="Full Name"> 
        </div> 
        <div class="form-group"> 
         <label for="exampleInputEmail1">Email Address</label><span id="emailcheck"></span> 
         <input type="email" class="form-control" id="regemail" name="regemail" placeholder="Enter email"> 
        </div> 
       </div> 
       <div class="form-group col-xs-6"> 
        <label for="exampleInputPassword1">Password</label> 
        <input type="password" class="form-control" id="regpass" name="regpass" placeholder="Password"> 
       </div> 
       <button style="position:relative; left: 15px; top: 10px;" class="btn btn-default" name="register" id="register">Register</button> 
      </form> 

Вот мой JQuery код:

$(document).ready(function(){ 
$('#regname').focus(); 
$('#signupForm').submit(function(e) { 
var regname = $('#regname'); 
var regemail = $('#regemail'); 
var regpass = $('#regpass'); 
var register_result = $('#register_result'); 
register_result.html('Loading..'); 
if(regname.val() == ''){ 
    regname.focus(); 
    register_result.html('<span class="errorss"> * Full name can not be blank</span>'); 
    e.preventDefault(); 
} 
else if ($.trim(regemail.val()).length == 0) { 
    regemail.focus(); 
    register_result.html('<span class="errorss">* Email address can not be blank</span>'); 
    e.preventDefault(); 
} 
else if(regpass.val() == ''){ 
    regpass.focus(); 
    register_result.html('<span class="errorss">* Password can not be blank</span>'); 
    e.preventDefault(); 
} 
emailCheck().done(function(r){ 
    if(r){ 
     $('#regemail').focus(); 
     $('#register_result').html('<span class="errorss"> This email address is already existed. Please choose another one </span>'); 
     e.preventDefault(); 
     } 
    }); 

}); 
}); 
function emailCheck() { 
var regemail = $('#regemail'); 
var emailcheck = $('#emailcheck'); 
emailcheck.html(''); 
var UrlToPass = {regemail:regemail.val()} ; 
    $.ajax({ 
    type : 'POST', 
    cache: false, 
    data : UrlToPass, 
    url : 'emailcheck.php', 
    success: function(responseText){ 
     if(responseText == 0){ 
      return false; // good to go 
     } 
     else{ 
      emailcheck.html('<span class="errorss"> This email is existed.</span>'); 
      return true; // This email is registered. Please try different one 
     } 
    } 
    }); 

}

Answer 1

Сначала вы ничего не возвращаются из функции emailCheck(), но вы используете его, как если бы он возвращает объект обещания.

Так

$(document).ready(function() { 
    $('#regname').focus(); 
    $('#signupForm').submit(function (e) { 
     var regname = $('#regname'); 
     var regemail = $('#regemail'); 
     var regpass = $('#regpass'); 
     var register_result = $('#register_result'); 
     register_result.html('Loading..'); 
     //prevent the form submit 
     e.preventDefault(); 

     if (regname.val() == '') { 
      regname.focus(); 
      register_result.html('<span class="errorss"> * Full name can not be blank</span>'); 
     } else if ($.trim(regemail.val()).length == 0) { 
      regemail.focus(); 
      register_result.html('<span class="errorss">* Email address can not be blank</span>'); 
     } else if (regpass.val() == '') { 
      regpass.focus(); 
      register_result.html('<span class="errorss">* Password can not be blank</span>'); 
     } else { 
      emailCheck().done(function (r) { 
       if (r) { 
        $('#regemail').focus(); 
        $('#register_result').html('<span class="errorss"> This email address is already existed. Please choose another one </span>'); 
       } else { 
        $('#signupForm')[0].submit(); 
       } 
      }); 
     } 
    }); 
}); 

function emailCheck() { 
    var regemail = $('#regemail'); 
    var emailcheck = $('#emailcheck'); 
    emailcheck.html(''); 
    var UrlToPass = { 
     regemail: regemail.val() 
    }; 
    var deferred = jQuery.Deferred(); 
    $.ajax({ 
     type: 'POST', 
     cache: false, 
     data: UrlToPass, 
     url: 'emailcheck.php', 
     success: function (responseText) { 
      if (responseText == 0) { 
       deferred.resolve(false); 
      } else { 
       emailcheck.html('<span class="errorss"> This email is existed.</span>'); 
       deferred.resolve(true); 
      } 
     }, 
     error: function() { 
      deferred.reject(); 
     } 
    }); 
    return deferred.promise(); 
} 

Answer 2

Вы путаете себя с синхронизацией и асинхронными функциями. Функция ajax выполняет вызов Async и возвращает результат в своем обратном вызове. Вы пытаетесь обернуть функцию Async внутри нормальной функции и ожидать, что она будет вести себя синхронно.

Ваша функция возвращается до того, как вызов Ajax получает свой вывод. Используйте

асинхр: ложные

$.ajax({ 
    type : 'POST', 
    cache: false, 
    async: false, 
    data : UrlToPass, 

См следующего за dettails:

How to make JQuery-AJAX request synchronous