防止提交表单 - jquery？ [复制]

Question

可能重复：
How to prevent form from being submitted?

这是我的 jquery 代码：

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

由于某种原因，如果电子邮件地址被(result == "taken") - 表单仍然提交。

我做错了什么？邮箱地址被占用了如何让表单不提交？

谢谢

Answer 1

这是因为您从 $.get(function() 返回 false 而不是 $("#register").submit(function()

因为您的 AJAX 调用是异步的，所以您也无法使用 AJAX 调用的返回值设置变量。

因为函数已经完成，而 AJAX 调用可能仍在进行中。

你可以使用：

async: false

而不是做 return false / true 做：

var 有效 = 假； // 在提交函数的顶部

而不是做返回做：valid = true; // or false

在提交函数的最后做：

return valid;

编辑

对不起。

通过查看.get() 的文档，.get() 似乎没有采用异步参数。

您可以改用.ajax() 函数。 （get 是 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;
    });
});

Answer 2

您正在进行异步调用，这意味着您的第一个函数将返回。相反，如果你想这样做，你应该做的是在第一次调用时返回 false。然后根据第二次调用的答案，您可以调用 $("form").submit() 或显示错误。现在你在 AJAX 回调中返回 false。

基本上你想这样做：

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

Answer 3

只要做：

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