Как дождаться завершения проверки ajax перед отправкой формы?

Question

Имея проблему, когда форма отправляется перед функцией validateUsername, есть возможность завершить проверку имени пользователя на стороне сервера.

Как отправить форму только после завершения функции validateUsername? Надеюсь, что это понятно ...

form.submit(function(){ 
    if (validateUsername() & validateEmail() & validatePassword()) { 
     return true; 
    } else { 
     return false; 
    } 
});   

function validateUsername(){    
    usernameInfo.addClass("sign_up_drill"); 
    usernameInfo.text("checking..."); 
    var b = username.val(); 
    var filter = /^[a-zA-Z0-9_]+$/;  
    $.post("../username_check.php",{su_username:username.val()},function(data) { 
     if (data=='yes') { 
      username.addClass("error"); 
      usernameInfo.text("sorry, that one's taken"); 
      usernameInfo.addClass("error"); 
      return false;   
     } else if (!filter.test(b)) { 
      username.addClass("error"); 
      usernameInfo.text("no funny characters please"); 
      usernameInfo.addClass("error"); 
      return false; 
     } else { 
      username.removeClass("error"); 
      usernameInfo.text("ok"); 
      usernameInfo.removeClass("error");  
      return true;  
     } 
    });    
} 

Answer 1

Более подробный вариант ответа Олафура - вызов AJAX выполняется, и функция возвращается без ожидания.

Обратный вызов не заканчивается, пока вы не отправили форму.

Что вы должны сделать, так это нажать кнопку/триггер, который вызывает проверку AJAX, и обратный вызов должен отправить форму вместо возврата true.

Answer 2

Вы не можете вернуться в вызов AJAX. Предлагаю вам прочитать this section часто задаваемых вопросов по jQuery. Специально часть о обратных вызовах. (последний фрагмент кода)

Answer 3

Предлагаю наличие

1) скрытое поле в вашей форме.
2) Задайте значение 0 равным 0, прежде чем вы вызовете любую функцию, которая выполняет запрос AJAX.
3) Увеличьте значение, когда каждая из функций будет успешной при проверке.
4) Установите некоторое количество секунд (т. Е. Количество времени/таймаута, которое потребуется для завершения всех запросов AJAX + несколько секунд), чтобы подождать, прежде чем проверять значение этого скрытого поля. Проверьте, имеет ли значение 3 (если было 3 AJAX-запроса для проверки), и пусть оно будет отправлено затем.

Думаю, будет лучше делать проверку, когда управление теряет фокус. Включите кнопку отправки только тогда, когда все элементы управления проходят проверку.

Извините, я не очень хорошо знаком с JQuery, но я сделаю это, если бы я использовал простой javascript.

Answer 4

jQuery form validation plugin позаботится об этом для вас - я очень рекомендую.

Некоторые примеры кода:

$("#myform").validate({ 
    rules: { 
    email: { 
     required: true, 
     email: true 
    }, 
    username: { 
     required: true, 
     remote: { 
     url: "../username_check.php", 
     type: "post", 
     } 
     } 
    } 
    } 
}); 

Answer 5

В JQuery есть решение для того же. Мне нужно проверить, существует ли пользователь или нет в моем приложении во время некоторого JavaScript. Вот код:

var pars = "username="+ username; 
var some = $.ajax({url: 'AjaxUserNameExist.php', 
    type: 'GET', 
    data: pars, 
    async: false 
}).responseText; 


if(some=="1") //this is value Got from PHP 
{ 
    alert("We cannot Go"); 
    return false; 
} 

if(some=="0") 
{ 
    alert("We can Go"); 
    return true; 
} 

Answer 6

Почему бы вам не просто использовать $('#yourFormId').submit(); после того, как вы получили результат от вашего АЯКС бэкэндом?

Answer 7

В последнее время я столкнулся с аналогичной проблемой. В некоторых случаях нажатие ввода на поле ввода может привести к отправке формы. Я попытался исправить это несколькими способами, а затем требуемые спецификации изменились так, что нажатие клавиши Enter или Go на устройстве позволит отправить форму. Мое решение было тем, что имело смысл для меня в то время.

var form_submit = false; 

function validateInput() { 

    var field_value = $('#username').val(); 

    $.post('validation.php', {'input': field_value }, function (d) { 
     if (d.valid) { 

      form_submit = true; 
      $('form').submit(); 

     } else { 

      //error message or whatever 

     } 
    }, 'json'); 

} 

$('form').submit(function() { 

    if (form_submit) { 
     return true; 
    } else { 
     validateInput(); 
     return false; 
    } 

});