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);
}

Редактировать Итак, на самом деле это не обновляет страницу,

Что-то настраивает отображение формы: нет;

Я добавил целую кучу 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 ОК 30 мс
8
4
5
9
10
14
16
17
19
15
Второй щелчок
1
2
3
POST http://localhost/buzz/ajax/login 200 OK 30 мс
8
4
5
9
10
11
12
16
17
19
13
18

Answer 1

Одним из вариантов является наличие обычной кнопки, а не кнопки отправки.Воспользуйтесь кнопкой мыши на кнопке, которую вы называете проверкой / ajax.

Answer 2

Я предполагаю, что это связано с тем, что анимация формы и / или #error не завершена. Вы можете убедиться, что что-то изменилось после неудачного входа в систему. Таким образом, некоторые if/else операторы до отправки формы в коде, чтобы убедиться, что форма является отправляемой, могут сделать эту работу ... Возможно, было бы неплохо убедиться, что есть имя пользователя и пароль перед отправкой формы ....

Вот краткий пример непроверенного кода с некоторыми комментариями по изменениям ...

$('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...
}