Question

我无法找到我在这里寻找的答案。我使用ajax检查数据库中是否存在用户名，如果用户存在，则表单中会显示错误。但是，如果存在错误，我试图阻止提交表单。我已经尝试过event.preventDefault（），但我不确定我是否正确使用它，或者我是否错误使用它。

我的JS代码是：

$(".check").blur(function () {
    var username = $(".check").val();
    $.ajax({
        url: "validateUser.php",
        type: "post",
        data: "username=" + username
    }).done(function (result) {
        if (result == "true") {
            // CODE TO RUN IF ERROR DOESN'T EXIST
        } else {
            // CODE TO RUN IF ERROR DOES EXIST
            // CREATE THE ERROR MESSAGE AND DISPLAYS IT
            event.preventDefault();
        }
    });
});

Answer 1

对表单提交验证以及模糊。

function checkUsername(username) {
    var username = $(".check").val();
    return $.ajax({
        url: "validateUser.php",
        type: "post",
        data: "username=" + username
    }).then(function (result) {
        var def = $.Deferred();
        if (result == "true") {
            // CODE TO RUN IF ERROR DOESN'T EXIST

            def.resolve();
        } else {
            // CODE TO RUN IF ERROR DOES EXIST
            // CREATE THE ERROR MESSAGE AND DISPLAYS IT

            def.reject();
        }
        return def.promise();
    });
}

$(".check").blur(checkUsername);
$("#myform").submit(function(e){
    var self = this;
    e.preventDefault();
    checkUsername().done(function(){
        // username was ok
        self.submit();
    });
});

Answer 2

为了阻止您的表单提交，您必须在preventDefault()表单的submit JavaScript事件处理程序的event实例上调用{{1}}。

Answer 3

你可以这样做：

$("form").submit(function(){
    return !$(this).hasClass("error");
});

$(".check").blur(function () {
   var username = $(".check").val();
    $.ajax({
        url: "validateUser.php",
        type: "post",
        data: "username=" + username
    }).done(function (result) {
        if (result == "true") {
            $("form").removeClass('error')
        } else {
            $("form).addClass("error");
        }
    });
});

所以你的ajax会添加一个类错误，如果它有效则删除它。如果表单已提交，则会在类错误时取消。

Ajax是异步的，因此您无法直接返回它。因为代码将继续运行而不是等待done函数。

Answer 4

使用return false代替e.preventDefault()。

Answer 5

试试这个：

$(".check").blur(function (event) {

    // Prevent Default the event here...
    event.preventDefault(); 

    var username = $(".check").val();
    $.ajax({
        url: "validateUser.php",
        type: "post",
        data: "username=" + username
    }).done(function (result) {
        if (result == "true") {
            // CODE TO RUN IF ERROR DOESN'T EXIST
            $("form").submit();  
        } else {
            // CODE TO RUN IF ERROR DOES EXIST
            // CREATE THE ERROR MESSAGE AND DISPLAYS IT                             
            $(this).focus();
            alert('An error occurred!');
        }
    });
});

这里有一些要点：

您甚至没有在函数中添加event，而是在调用event.preventDefault()。
如果结果为"true"，您只需提交表单或运行代码。
否则，只需将focus放回文本框并显示警告消息。

Answer 6

根据你的意见，我认为你应该试试这个：

if (result == "true") {
    $(this).closest('form').submit();
} else {
    $(this).closest('form').submit(function(event){
        event.preventDefault();
    });
}

如果存在ajax错误，jquery会阻止表单提交

6 个答案:

这里有一些要点：