js validation only runs once

Question

I'm having an issue with the code below where if I put an invalid email address in it will properly show the signUpWarning alert the first time but if I close that box and try the same invalid email it won't pop back up. Any ideas?

    $(document).ready(function() {

    //if submit button is clicked
    $('#submit_btn').click(function(e) {
        e.preventDefault();
        var email = $('#email').val();
        if (!is_valid_email(email)){
            $("#signUpWarning").show();
        }else{

            $.ajax({
                url: "process.php",
                type: "post",
                data: "email=" + email,
                success: function() {
                    $("#signUpWarning").hide();
                    $("#signUpAlert").show();
                }
            });
        }
    });
});

function is_valid_email (email)
{
    return /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email);
}

The code for the alert box is:

  <div class="alert alert-block alert-error hide" id="signUpWarning"><!--Use: $("#signUpWarning").show(); to show this alert-->
    <a class="close" data-dismiss="alert">×</a>
    <h5 class="alert-heading">Sorry!</h5>&nbsp;Your e-mail address was not valid, please try again.
  </div>

Answer 1

Check that you're not removing the element from the DOM when closing the alert.

console.log($("#signUpWarning")); before the $("#signUpWarning").show(); should help determine if that's what's happening.