Как правильно организовать AJAX-проверку формы?

Question

[Егор Вавилов]

Добрый день!

Я перехватываю отправку формы для проверки введённых данных. Сначала проверяю логин на пустоту и AJAX-запросом на уникальность. Потом тоже самое с электронной почтой. Если логин или почта уже заняты, то переменной var error присваивается значение true. А в самом конце я проверяю, если error == false(то есть ошибок нет), то отправляю форму. Но проблема в том, что пока происходят AJAX-запросы на уникальность логина и почты выполнение скрипта продолжается и доходит до проверки if (error == true) return false. Естественно, что с сервера код ошибки ещё не пришёл и браузер думает, что error имеет значение false, и отправляет данные на регистрацию. Как избавиться от этой ошибки? Примерный код ниже.

var error = false;

if (!login.length) {
    error = true;
}
else {
    $.ajax({
        // отправка логина на проверку уникальности
    });
}

if (!email.length) {
    error = true
}
else {
    $.ajax({
        // отправка email на проверку уникальности
    });
}

if (error == true) {
    // Выдача сообщения об ошибке
}
else {
    // Отправка формы на регистрацию
}

P.S. Проверка данных осуществляется в разных файлах на сервере, поэтому отправить один XML с ошибками и обработать его не получится.

Answer 1

[lnked]

Вы хотите сделать много лишних запросов, можно все сделать в 1м запросе
код не проверен, писался для ответа на вопрос:

$('body').on('submit', '#login-form', function(e) {
    e.preventDefault();
    
    var error = false,
        $form = $(this),
        $email = $('input[name="email"]'),
        $login = $('input[name="login"]');
    
    // Вначале надо проверить на пустоту поля, что бы не делать лишний запрос
    if ($('input[name="login"]').is(':empty'))
    {
        $login.addClass('error');
        error = true;
    }
    
    if ($email.is(':empty'))
    {
        $email.addClass('error');
        error = true;
    }

    if (!error)
    {
        $form.find('.error').removeClass('error'); // если подсвечиваете поля с ошибками, при повторном запросе надо убрать отметку

        $.ajax({
            url: '/api/login/',
            type: 'post',
            data: $form.serialize(),
            dataType: 'JSON',
            success: function(data)
            {
                if (!data.errors)
                {
                    // Поздравляем с успешной регистрацией
                }
                else
                {
                    // Выдача сообщения об ошибке
                }
            }
        });
    }
    return false;
});

Answer 2

[Андрей Малиновский]

Как вариант, еще можно установить для ajax параметр async в false. Тогда ваши запросы будут выполняться синхронно и к if уже будут приходить валидные данные.

$.ajax({
    //other parameters
     async:false
});