即使在从ajax验证返回false时,onsubmit仍然提交表单

时间:2015-03-19 13:11:29

标签: javascript php jquery ajax forms

我正在使用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,表单仍然提交。知道为什么吗?

也没有错误。

1 个答案:

答案 0 :(得分:3)

你不能通过在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);