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进行表单验证需要两次单击提交

1 个答案: