Использование AJAX для проверки формы требует двух нажатий на кнопку Отправить

Я использую вызов AJAX для проверки поля электронной почты в форме. Это необходимо, потому что мне нужно проверить, если адрес электронной почты уже взят. После того, как моя первая попытка вызвала бесконечный цикл запросов ajax, я нашел это решение, которое, кажется, работает нормально.

Кроме того: мне нужно нажать кнопку Отправить дважды, прежде чем форма действительно отправится. У кого-нибудь есть идея, почему это так?

Это минимальный пример моего кода js: 

$('form').submit(function(event){
    event.preventDefault();
    $.post('/echo/json', {'mail': $('#test').val()}, function(data){
        //decide if valid or not based on data
        //we assume it's valid an want to submit the form now!
        $('form').unbind().submit();

        //we should only see this for a very short time
        $('.info').text('should have already submitted');
    }, 'json');
});

Здесь есть jsfiddle .

Править: Простите, я не совсем ясно выразился. Я вставил несколько комментариев, чтобы прояснить ситуацию.: Я хочу использовать ответ на запрос AJAX, чтобы решить, отправлять ли форму или нет, и показать ошибку, если нет. Не отправка работает хорошо, но если адрес электронной почты действителен, требуется два клика на submit, чтобы действительно отправить. Пример имитирует этот случай.

unbind() необходимо, потому что в противном случае я создам бесконечный цикл ({2]} будет вызван снова). Также jQuery.пост() является асинхронный вызов event.preventDefault() внутри обработчика успеха не будет работать, потому что форма уже была бы отправлена.

1 2
jquery validation ajax preventdefault

1 ответ:

Может быть, это то, что вам нужно?

Открепите submit обработчик событий и затем триггер $('#submit') Нажмите: 

$('form').submit(function(event){
    event.preventDefault();
    $.post('/echo/json', {'mail': $('#test').val()}, function(data){
        $('form').unbind('submit').find('#submit').trigger('click');
        $('.info').text('should have already submitted');
    }, 'json');
});

Демо-версия

В качестве альтернативы используйте .one() обработчик событий (так что этот обработчик срабатывает только один раз), а затем триггер $('#submit') щелкает, так что форма передается обычным способом после ответа AJAX.

$('form').one('submit',function(event){
    event.preventDefault();
    $.post('/echo/json/', {action : 'checkmail_action', mail : $('#test').val()}, function(data){
        //if(data == 'e-mail is valid'){
            $('#submit').trigger('click');
        //}
        $('.info').text('should have already submitted');
    }, 'json');
});

Демо-версия

Или, если вам снова нужно отправить событие, вы можете обернуть обработчик событий .one() в функцию: 

function ajaxCheck(){
    $('form').one('submit',function(event){
        event.preventDefault();
        $.post('/echo/json/', {action : 'checkmail_action', mail : $('#test').val()}, function(data){
            if(data == 'e-mail is valid'){
                // submit the form without AJAX:
                $('#submit').trigger('click');
            }else{
                // rebind submit handler, so that e-mail can be validated with AJAX again:
                ajaxCheck();
            }
            $('.info').text('should have already submitted');
        }, 'json');
    });
}
// bind single submit handler:
ajaxCheck();

ПС. Не используйте кавычки на ключах AJAX data.

1