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

Question

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

异常(exception):在表单实际提交之前，我需要单击“提交”两次。有人知道这是为什么吗？

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

也许这就是您所需要的？

取消绑定(bind)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 键上使用引号。