Prevent form from being submitted - jquery?

Question

Possible Duplicate:
How to prevent form from being submitted?

Here is my jquery code:

$(document).ready(function() {
    $("#register").submit(function (event) {
    var email = $('#email-agency').val();
    /* EMAIL VALIDATION */
    if (email == ""){
        $('#email-agency').css({"border-color":"#3399ff"});
        $('#email-err').html("You must enter your e-mail address.").removeClass("success_msg").addClass("error_msg");
    }else{
        $('#email-err').html("<img src='http://www.site.com/folder/ajax-loader.gif' />&nbsp;&nbsp;&nbsp;Validating the e-mail address...").removeClass("success_msg").removeClass("error_msg");
        $.get('http://www.site.com/folder/email.php',{id: email}, function(result){
            if (result == "invalid format"){
                $('#email-agency').css({"border-color":"#3399ff"});
                $('#email-err').html(email + " is not a valid e-mail address.").removeClass("success_msg").addClass("error_msg");
                event.preventDefault();
                return false;
            }else if (result == "taken"){
                $('#email-agency').css({"border-color":"#3399ff"});
                $('#email-err').html("I'm sorry, this e-mail address is already taken.").removeClass("success_msg").addClass("error_msg");
                event.preventDefault();
                return false;
            }else if (result == "available"){
                $('#email-agency').css({"border-color":"#1f6d21"});
                $('#email-err').html("Congratulations, this e-mail address is available.").removeClass("error_msg").addClass("success_msg");
                return true;
            }
        })
    }
});

For some reason, if the e-mail address is taken (result == "taken") - the form still submits.

What am I doing wrong? How can I make the form not submit if the e-mail address is taken?

Thank you

PeeHaa · Answer 1 · 2011-09-23T07:39:39.803

It's because you are returning false from the $.get(function() instead of the $("#register").submit(function()

Because your AJAX call is being made async you also can't set a variable with the return value of the AJAX call.

Because the function is already finished while the AJAX call may still be in progress.

You could use:

async: false

And instead of doing return false / true do:

var valid = false; // at top of submit function

and instead of doing the returns do: valid = true; // or false

And at the end of the submit function do:

return valid;

EDIT

Sorry.

By looking at the docs of .get() it looks like .get() doesn't take an async param.

You can use the .ajax() function instead. (get is a shorthand for ajax).

http://api.jquery.com/jQuery.ajax/

EDIT2

$(document).ready(function() {
    $("#register").submit(function (event) {

    var valid = false;

    var email = $('#email-agency').val();
    if (email == ""){
        $('#email-agency').css({"border-color":"#3399ff"});
        $('#email-err').html("You must enter your e-mail address.").removeClass("success_msg").addClass("error_msg");
    }else{
        $('#email-err').html("<img src='http://www.site.com/folder/ajax-loader.gif' />&nbsp;&nbsp;&nbsp;Validating the e-mail address...").removeClass("success_msg").removeClass("error_msg");
        $.get('http://www.site.com/folder/email.php',{id: email}, function(result){
            if (result == "invalid format"){
                $('#email-agency').css({"border-color":"#3399ff"});
                $('#email-err').html(email + " is not a valid e-mail address.").removeClass("success_msg").addClass("error_msg");
                event.preventDefault();
                valid false;
            }else if (result == "taken"){
                $('#email-agency').css({"border-color":"#3399ff"});
                $('#email-err').html("I'm sorry, this e-mail address is already taken.").removeClass("success_msg").addClass("error_msg");
                event.preventDefault();
                valid false;
            }else if (result == "available"){
                $('#email-agency').css({"border-color":"#1f6d21"});
                $('#email-err').html("Congratulations, this e-mail address is available.").removeClass("error_msg").addClass("success_msg");
                valid true;
            }
        })
    }
    return valid;
    });
});

How do I return from the main submit function? – Latox Sep 23 '11 at 07:30 — Latox, Sep 23 '11 at 07:30
`return valid;` at the end of the function – PeeHaa Sep 23 '11 at 07:37 — PeeHaa, Sep 23 '11 at 07:37

Kit Sunde · Answer 2 · 2011-09-23T07:51:32.897

You are making an asynchronous call which means that your first function will return. Instead what you should do if you want to do like that is to return false on the first call. Then depending on the answer on the second call you can call $("form").submit() or display an error. Right now you are returning false into the AJAX callback.

Essentially you want to do this:

function validate(e){
  e.preventDefault(); //Stop form from submitting

  $.get(/*foo*/, function(response){
    if( response ){ //yay validates
      $("form").submit();
    }else{ //Doesn't validate show error.
      $("form .error").show();
    }
  });
}

score 0 · Answer 3 · answered Sep 23 '11 at 07:27

0

Just do:

return $.get('http://www.site.com/folder/email.php',{id: email}, function(result){ 
  //more code
}

answered Sep 23 '11 at 07:27

Snicksie

1,987
17
27

I have more than one thing being validated, I only included the e-mail part in this as its the only one I'm having trouble with. I think it's because event.preventDefault() gets over written with the AJAX result. return false; doesn't work. – Latox Sep 23 '11 at 07:29
`event.preventDefault()` doesn't seem to work. Maybe you can assign each check to a variable and if one of the vars is valse, you return false to your form. – Snicksie Sep 23 '11 at 07:31

Prevent form from being submitted - jquery?

3 Answers3