jQuery通过ajax验证电子邮件，然后再通过ajax提交表单

小编典典

jQuery通过ajax验证电子邮件，然后再通过ajax提交表单

ajax

我有一个配置文件创建表单，其中包含一个电子邮件地址字段。我需要确保用户输入的电子邮件地址格式正确，并且尚未使用。对于格式检查，我通过isValidEmailAddress函数执行了一个简单的客户端验证，效果很好。对于需要检查电子邮件地址是否不存在的另一部分，我向控制器方法执行了一个jquery帖子，如果该电子邮件已被某人使用，则返回一个字符串“电子邮件地址已在使用中”。第一个“
return false”下面的代码不会阻止表单提交。这是一个jquery是异步的东西吗？

  $(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帖子似乎不起作用..as在我看来服务器日志中没有发生服务器调用。有人知道发生了什么吗？谢谢。

阅读 339

2020-07-26

共1个答案

小编典典

您必须无条件地取消提交，因为提交处理程序将在ajax请求返回之前完成执行（除非将async设置为false），因此您无法阻止已经发生的操作。您可以设置一个标志以指示电子邮件是否有效，然后提交表格

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

2020-07-26