javascript停止表单提交

Question

我有一个登录表单，我正在尝试使用 ajax 处理。

乍一看还不错，

你点击登录按钮，
如果您的详细信息正确，则您已登录并重定向。

如果您的详细信息不正确，则会显示错误消息。

如果您等待错误消息消失并再次单击登录按钮，它就可以正常工作。

如果您不等待，它似乎会提交表单。
为什么会这样？

这里是代码

var timeout = null;

$(function() {
    $('form').submit(function() {
        var action = $(this).attr('action');
        var type = $(this).attr('method');
        $.ajax({
            url: action,
            type: type,
            data: {
                email: $('input[name=email]').val(),
                pass: $('input[name=pass]').val()
            },
            success: function(data) {
                switch (data.status) {
                    case false:
                        login_error(data.message);
                        return false;
                        break;
                    case true:
                        window.location = data.message;
                        return false;
                        break;
                }
                return false;
            }
        });
        return false;
    })
});

function login_error(message) {
    $('form').effect('shake', { distance: 10, times: 3 }, 50);
    if (timeout !== null) {
        clearTimeout(timeout);
        $('#login').stop().hide();
        show_error(message);
    } else {
        show_error(message);
    }
}

function show_error(message) {
    $('#error').html(message)
            .show("drop", {direction: 'left'}, 500);
    timeout = setTimeout(function() {
        $('#error').hide("drop", {direction: 'right'}, 500);
        timeout = null;
    }, 5000);
}

---

编辑
好的，所以它实际上并没有刷新页面，

某些东西正在将表单设置为 display:none;

我通过代码添加了一大堆console.log()，然后点击了两次登录，现在看起来像：

var timeout = null;

$(function() {
    $('form').submit(function() {
        console.log(1);
        var action = $(this).attr('action');
        console.log(2);
        var type = $(this).attr('method');
        console.log(3);
        $.ajax({
            url: action,
            type: type,
            data: {
                email: $('input[name=email]').val(),
                pass: $('input[name=pass]').val()
            },
            success: function(data) {
                console.log(4);
                switch (data.status) {
                    case false:
                            console.log(5);
                        login_error(data.message);
                        return false;
                        break;
                    case true:
                            console.log(6);
                        window.location = data.message;
                        return false;
                        break;
                }
                console.log(7);
                return false;
            }
        });
        console.log(8);
        return false;
    })
});

function login_error(message) {
    console.log(9);
    $('form').effect('shake', { distance: 10, times: 3 }, 50);
    console.log(10);
    if (timeout !== null) {
        console.log(11);
        clearTimeout(timeout);
        $('#login').stop().hide();
        console.log(12);
        show_error(message);
        console.log(13);
    } else {
        console.log(14);
        show_error(message);
        console.log(15);
    }
}

function show_error(message) {
    console.log(16);
    $('#error').html(message)
            .show("drop", {direction: 'left'}, 500);
    console.log(17);
    timeout = setTimeout(function() {
        console.log(18);
        $('#error').hide("drop", {direction: 'right'}, 500);
        timeout = null;
    }, 5000);
    console.log(19);
}

输出为：

1
2
3
POST http://localhost/buzz/ajax/login 200 OK 30ms
8
4
5
9
10
14
16
17
19
15
第二次点击
1
2
3
POST http://localhost/buzz/ajax/login 200 OK 30ms
8
4
5
9
10
11
12
16
17
19
13
18

Answer 1

一种选择是使用常规按钮，而不是提交按钮。在您调用验证/ajax 的按钮上使用 onclick。

Answer 2

我猜这与表单的动画和/或#error 未完成有关。您可能希望确保登录失败后某些内容发生了变化。因此，在以代码形式提交表单以确保表单可提交之前，一些if/else 语句可能会使这项工作......在提交表单之前确保用户名和密码的值可能是个好主意....

这是未经测试的代码的快速示例，其中包含一些 cmets 的更改...

$('form').submit(function() {
     //DEFINE "ISVALID()"....
     if($('input[name=pass]').val().ISVALID())
     {
         //your do login code here...
     }
     else
     {
         login_error("Please enter a password!");
     }
})
function login_error(message) {
    //CLEAR PASSWORD
    $('input[name=pass]').val() = "";
    //THE REST OF YOUR CODE HERE...
}