即使从 ajax 验证返回 false，onsubmit 仍会提交表单

Question

我正在使用 ajax 验证我的表单，我只是检查是否存在重复的用户名，如果存在则返回 false，否则返回 true。

这是我的 ajax：

function checkform(){
    var username = $("#username").val();
    $.ajax({url:"<?php echo base_url() ?>Delivery/usernamecheck/", 
        data: {username: username},
        type:'post',
        async:false,
        success: function(data){
            if(data > 0){
                $("#info").attr("class","form-group has-error");
                $("#info1").html("Duplicate Username!");
                event.preventDefault();
                return false;
            }else{
                return true;
            }
        }
    });
}

我的html：

<form class="form-signin" role="form" action="<?php echo base_url() ?>Delivery/reg/" method = "post" onsubmit=" return checkform();">
</form>

即使返回 false，表单仍会提交。知道为什么吗？

也没有错误。

Answer 1

您不能通过在 ajax 响应中返回 false 来阻止提交表单，它需要在该函数中，解决方案是始终返回 false 并在 ajax 响应中重新提交：

var secondCall = false;
function checkform(){
    if (secondCall) {
        return;
    }
    var username = $("#username").val();
    $.ajax({url:"<?php echo base_url() ?>Delivery/usernamecheck/", 
        data: {username: username},
        type:'post',
        async:false,
        success: function(data){
            if(data > 0){
                $("#info").attr("class","form-group has-error");
                $("#info1").html("Duplicate Username!");
            }else{
                secondCall = true;
                $('.form-signin').submit();
            }
        }
    });
    return false;
}

注意最好在 JavaScript 中绑定提交事件：

$('.form-signin').submit(checkform);