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

Question

我正在使用 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.

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

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

Answer 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();

PS。不要在 AJAX data 键上使用引号。

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

Use of AJAX for form validation requires two clicks on submit

validation

ajax

jquery

preventdefault