Question

我拼凑了一个jQuery函数来验证电子邮件并使用ajax提交表单。到目前为止验证功能正常（给我错误消息）

但是如果用户输入有效的电子邮件，我希望我的ajax功能运行（它已经是seutp）。现在，当输入有效的电子邮件时，我收到了成功消息，但我不需要它 - 只是希望运行ajax。我尝试删除成功的消息，它有错误。

简而言之，电子邮件验证工作和ajax独立工作 - 我需要它们一起工作。类似：如果有错误，请显示错误消息，但如果验证了电子邮件，请运行ajax。

此外，这里是jsfiddle - http://jsfiddle.net/NjDeb/

$(document).ready(function() {

   $('.error').hide();
   $('.success').hide();

  $('input#email').css({backgroundColor:"#FFFFFF"});
  $('input#email').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
    $('.success').hide();
    $('.error').hide();
  });
  $('input#email').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".submit_button").click(function() {

        function validateEmail(email) {
        var email = $("input#email").val();        
        var filter = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{0,4}$/;
        if(filter.test(email))
        {
        return true;
        }
        else
        {
        return false;
        }
    }    

        if(!validateEmail('email'))
        {
        $('.error').show();
        return false;
        }
        else 
        {
        $('.success').show();
        return false;        
        }

        $.ajax({
          type: "POST",
          url: "process.php",
          data: email,
          success: function() {
        $('#signup').html("<div id='message'></div>");
        $('#message').html("<h3>You're signed up. Look for an invite from us soon.</h3>")
        .css({color:"#FFFFFF", fontFamily: "Exo, sans-serif", fontSize: "18px", marginTop: "10px", marginRight: "200px", fontWeight:"500"})
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("");
        });
      }
     });
    return false;
  });
});

Answer 1

您将在以下条件下以真假两种方式返回

if(!validateEmail('email'))
{
    $('.error').show();
    return false;
}
else 
{
    $('.success').show();
    return false;        
}

所以此后函数不会被执行，并且data: $("input#email").val()之前检查了email变量，这超出了范围。

所以喜欢以下

$(document).ready(function() {

   $('.error').hide();
   $('.success').hide();

  $('input#email').css({backgroundColor:"#FFFFFF"});
  $('input#email').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
    $('.success').hide();
    $('.error').hide();
  });
  $('input#email').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".submit_button").click(function() {

        function validateEmail(email) {
        var email = $("input#email").val();        
        var filter = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{0,4}$/;
        if(filter.test(email))
        {
        return true;
        }
        else
        {
        return false;
        }
    }    

        if(!validateEmail('email'))
        {
        $('.error').show();
        return false;
        }

        $('.success').show();


        $.ajax({
          type: "POST",
          url: "process.php",
          data: $("input#email").val(),
          success: function() {
        $('#signup').html("<div id='message'></div>");
        $('#message').html("<h3>You're signed up. Look for an invite from us soon.</h3>")
        .css({color:"#FFFFFF", fontFamily: "Exo, sans-serif", fontSize: "18px", marginTop: "10px", marginRight: "200px", fontWeight:"500"})
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("");
        });
      }
     });
    return false;
  });
});

Answer 2

在return false;

之后，我认为不需要$('.success').show();

此外，您应该正确传递电子邮件：

data: {'email':email},

只要变量email已在某处正确设置：

function validateEmail(email) {
        var email = $("input#email").val(); 
...
}

仅在本地声明该变量

jQuery + ajax表单验证和提交有一个扭曲

2 个答案: