javascript stop form submitting

Question

I have a login form that I am trying to handle with ajax.

At first appearance it works fine,

You click the login button,
if your details are correct you are logged in and redirected.

If your details are incorrect an error message is shown.

If you wait for the error message to disappear and click the login button again it works fine.

if you dont wait it seems to submit the form.
why does it do this?

here is the code

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

---

Edit
Ok, so its not actually refreshing the page,

Something is setting the form to display:none;

I have added a whole pile of console.log()'s through the code and clicked login twice so it now looks like:

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

With the output being:

1
2
3
POST http://localhost/buzz/ajax/login 200 OK 30ms
8
4
5
9
10
14
16
17
19
15
Second Click
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

I'm guessing it has to do with the animation of the form and/or #error not being completed. You may want to make sure something has changed after a failed login. So some if/else statements prior to submitting the form in code to make sure the form is submittable may make this work... It probably would be a good idea to make sure there is a value for username and password prior to submitting the form....

Here is a quick sample of untested code, with some comments on changes...

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

Answer 2

One choice is to have a regular button, not a submit button. Use the onclick on the button you call your validation/ajax.