使用 AJAX 进行表单验证需要点击两次提交答案

【问题标题】：Use of AJAX for form validation requires two clicks on submit使用 AJAX 进行表单验证需要点击两次提交
【发布时间】：2015-03-02 13:23:21
【问题描述】：

我正在使用 AJAX 调用来验证表单中的电子邮件字段。这是必要的，因为我需要验证电子邮件地址是否已被占用。在我第一次尝试导致 ajax 请求无限循环后，我发现 this solution 似乎工作正常。

例外：我需要在表单实际提交之前单击两次提交。有人知道为什么会这样吗？

这是我的 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。

编辑：对不起，我想我不是很清楚。我插入了一些 cmets 来澄清：我想使用 AJAX 请求的响应来决定是否提交表单，如果没有则显示错误。不提交效果很好，但如果邮件地址有效，则需要点击两次提交才能实际提交。该示例模拟了这种情况。

unbind() 是必要的，否则我会创建一个无限循环（$('form').submit(...) 将被再次调用）。此外 jQuery.post() 是异步的，因此在成功处理程序中调用 event.preventDefault() 将不起作用，因为表单已经提交了。

【问题讨论】：

标签： jquery ajax validation 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');
});

DEMO

或者，使用.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');
});

DEMO

或者，如果您需要再次提交事件，您可以将.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 键上使用引号。

【讨论】：