2015-11-09 4 views
0

Я создаю форму, и я хочу ее проверить в режиме реального времени. Все работает в вызове ajax, но у меня проблема с возвратами. Это код:JQuery: Почему пусто?

function checkEmail() { 
    var reg_exp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/; 
    var mail = $("#email").val(); 
    if (!reg_exp.test(mail) || (mail === "") || (mail === "undefined")) { 
     $("#mail_mess").html("Enter a valid email address"); 
     return false; 
    } 
    else { 
     var r = ''; 
     $.ajax({ 
      type: "POST", 
      url: "index.php?p=jsform&ajaxcall=checkEmail", 
      data: {'mail':mail}, 
      dataType: 'json', 
      success: function(res) { 
       r = res; 
       if(res) { 
        $("#mail_mess").html("OK"); 
        //return true; 
       } 
       else { 
        $("#mail_mess").html("Email already Exists!"); 
        //return false; 
       } 
      }    
     }); 
     //alert(r); 
     return r; 
    } 
} 

$("#email").on("input", function() { 
    checkEmail(); 
}); 

$("#submitButton").click(function() { 
    if(... && checkEmail()) { 
     sendForm(); 
    } 
    else { 
     $("#form_message").html("<span class='error'>All fields are required</span>"); 
    } 

}); 

Как вы можете видеть, я вызываю функцию checkEmail() на изменение входного сигнала (для проверки в режиме реального времени) и отправить (все поля проверить перед отправкой данных). Функция checkEmail() должна возвращать значение false по недействительной электронной почте или уже существующему электронному письму и должно возвращать true в действительном и не существующем письме.

Теперь эта функция работает с проверкой в ​​реальном времени, я получаю «недействительный», «уже существующий» или «действительный», когда захочу. Проблема связана с возвратами, потому что когда я возвращаю r, это пустая строка (кажется, что r = res не работает). И если я попытаюсь раскомментировать возвраты внутри if (res)/else, они тоже не работают.

Прошу прощения за мой плохой английский! Спасибо за любую помощь :-)

+3

ajax is a асинхронный - вы возвращаетесь ng r до завершения процесса ajax - вам нужно будет переписать код для использования обратных вызовов или обещаний, потому что вы не сможете «возвращать r» из этой функции. –

+0

return false не имеет большого смысла, даже если он не был асинхронным. Возврат false предотвращает появление события, что делает невозможным ввод пользователем действительного адреса электронной почты, кроме как путем копирования/вставки и автозаполнения. –

+0

Если вам не нужен ваш метод для асинхронности, быстрое исправление заключается в добавлении «async: false» к вашему вызову ajax. – Zachary

ответ

1

CheckMail должен принимать дополнительный обратный вызов, и вызвать его с результатом, если определено

function checkEmail(callback) { 
    var reg_exp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/; 
    var mail = $("#email").val(); 
    if (!reg_exp.test(mail) || (mail === "") || (mail === "undefined")) { 
     $("#mail_mess").html("Enter a valid email address"); 
     if(callback) { 
      callback(false); 
     } 
    } 
    else { 
     $.ajax({ 
      type: "POST", 
      url: "index.php?p=jsform&ajaxcall=checkEmail", 
      data: {'mail':mail}, 
      dataType: 'json', 
      success: function(res) { 
       if(res) { 
        $("#mail_mess").html("OK"); 
        //return true; 
       } 
       else { 
        $("#mail_mess").html("Email already Exists!"); 
        //return false; 
       } 
       if(callback) { 
        callback(res); 
       } 
      }    
     }); 
    } 
} 

нет необходимости для обратного вызова функции здесь

$("#email").on("input", function() { 
    checkEmail(); 
}); 

функция не в состоянии определить чтобы избежать повторения, поскольку в настоящее время существует два «ложных» пути

$("#submitButton").click(function() { 
    function fail() { 
     $("#form_message").html("<span class='error'>All fields are required</span>"); 
    } 
    if(...) { 
     checkEmail(function(r) { 
      if (r) { 
       sendForm(); 
      } 
      else { 
       fail() 
      }); 
    else { 
     fail(); 
    } 
}); 
Смежные вопросы