jQuery+ajax form validation and submission with a twist

Question

I've cobbled together a jQuery function to validate email and submit the form using ajax. So far the validation function works okay (gives me error messages)

But if the user enters valid email, I want my ajax function to run (it's seutp already). Right now I've got a success message when a valid email is entered, but I don't need it--just want the ajax to run. I tried removing the success msg and it got buggy.

In short, the email validation works and the ajax works independently--I need them to work together. Sort of like: if there's an error, show the error message, but if the email is validated, run the ajax.

Also, here's the 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

You are returning in both true and false case on following condition

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

so function will not be execute after this, and check on data: $("input#email").val() earlier there was email variable, which was out of scope.

so do like following

$(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

I don't see the need of that return false; after $('.success').show();

Also, you should be properly passing the email:

data: {'email':email},

As long as variable email has been properly set somewhere:

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

Declares that variable only locally