2011-09-23 214 views
0

可能重复:
How to prevent form from being submitted?防止表单被提交 - jQuery的?

这里是我的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") - 形式仍提交。

我在做什么错?如果收到电子邮件地址,我怎样才能使表格不提交?

谢谢

回答

2

这是因为你是从$.get(function()返回false代替$("#register").submit(function()

因为你的AJAX调用被异步你做也不能设置一个变量与AJAX的返回值呼叫。

因为该功能已经完成,而AJAX呼叫可能仍在进行中。

你可以使用:

async: false 

而不是做返回false /真做,:

VAR有效= FALSE; //在而不是做回报提交功能

的顶部,这样做:valid = true; //或假

,并在提交功能的做到底:

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

如何从主提交函数返回? – Latox

+0

'return valid;'函数结尾处 – PeeHaa

+0

为什么downvote? – PeeHaa

0

只要做到:

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

我有不止一件事情正在验证中,我只在其中包含电子邮件部分,因为它是我唯一遇到的问题。我认为这是因为event.preventDefault()会覆盖AJAX结果。返回false;不起作用。 – Latox

+0

'event.preventDefault()似乎不起作用。也许你可以将每个检查分配给一个变量,如果其中一个变量是valse,那么你将返回false给你的表单。 – Snicksie

1

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

基本上你想这样做:

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