Как дождаться завершения проверки 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

Плагин jQuery для проверки формы позаботится об этом за вас - я настоятельно рекомендую его.

Пример кода:

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

Answer 3

Я недавно сталкивался с подобной проблемой. В некоторых случаях нажатие клавиши ввода в поле ввода может привести к отправке формы. Я попытался исправить это несколькими способами, а затем изменились требуемые спецификации, так что нажатие клавиши 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;
    }

});

Answer 4

В 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 5

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

Answer 6

Я предлагаю иметь

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

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

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

Answer 7

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