jQuery的通过AJAX提交表单之前也通过AJAX验证电子邮件 [英] jquery validate email via ajax before submitting form also via ajax

问题描述

我有一个配置文件创建形式，它有一个电子邮件地址字段。我需要确保用户输入的电子邮件地址是有效的格式，而且它也没有被使用。对于格式检查，我得到isValidEmailAddress功能效果很好，进行了简单的客户端验证。对于另一部分，我需要检查，如果电子邮件地址不存在，我做一个jQuery的职位，其中已经在使用的电子邮件地址返回一个字符串，如果邮件使用人already..but控制器中的方法下面的第一个code返回false不从停止提交表单。这是一个jQuery是异步的事情吗？

I have a profile create form which has an email address field. I need to make sure that the email address entered by the user is in a valid format, and that it's also not already in use. For the format check, i have a simple client side validation performed by the isValidEmailAddress function which works well. For the other part where I need to check if the email address does not already exist, I do a jquery post to a controller method which returns a string "email address already in use" if the email is used by someone already..but in the code below the first "return false" is not stopping the form from submitting. Is this a jquery being asynchronous thing?

  $(document).ready(function(){

    $("#new_profile").submit(function(){
      var email = $("#user_email").val();    
      if(isValidEmailAddress(email)){
        jQuery.post('/profiles/validate_email', {email: email}, function(data){
          if(data.match(/in use/)){
            $(".email-check-message").html(data);
            return false;
          }
        });
      }
      else{
        $(".email-check-message").html('please enter a valid email address');
        return false;
      }
    });    
  });

此外，在上述功能的jQuery的职位似乎并没有被working..as在我没有看到服务器调用发生在服务器日志。任何人都知道这是怎么回事？谢谢你。

Also, the jquery post in the above function does not seem to be working..as in i don't see the server call happening in the server log. Anyone know what's going on? Thanks.

推荐答案

您必须无条件地取消提交，因为提交处理程序将完成Ajax请求返回之前执行（除非你设置异步为false），这样你就可以T prevent已经发生了作用。您可以设置一个标志，表明该邮件是否是有效的，然后提交表单

You have to unconditionally cancel the submit because the the submit handler will have finished executing before the ajax request returns(unless you set async to false), so you can't prevent an action that already occurred. You can set a flag to indicate whether or not the email is valid and then submit the form

$(document).ready(function(){
    $("#new_profile").submit(function(e){
        if (!$('#new_profile').data('validemail')){
            e.preventDefault();
            var email = $("#user_email").val();    
            if(isValidEmailAddress(email)){
                jQuery.post('/profiles/validate_email', {email: email}, function(data){
                    if(data.match(/in use/)){
                        $(".email-check-message").html(data);
                    }
                    else{
                        $('#new_profile').data('validemail', true).submit();
                    }
                });
            }
            else{
                $(".email-check-message").html('please enter a valid email address');
            }
        }
    });     
});

这篇关于jQuery的通过AJAX提交表单之前也通过AJAX验证电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！