Jquery validation will not execute

For some reason my jquery validation and ajax will not work and i cannot see where i did this script wrong. I am referencing jquery in my header, and when i remove the ajax function the script runs fine. Anyone see whats going on?

<script type="text/JavaScript">

$(document).ready(function() {

$('#btn-submit').click(function(e) { 

    // stop normal button action, whatever it is
    e.preventDefault();

    $(".error").hide();
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var emailaddressVal = $("#UserEmail").val();
    if(emailaddressVal == '') {
        $("#submit").after('<span class="error">Please enter a email address.</span>');
        hasError = true;
    }

    else if(!emailReg.test(emailaddressVal)) {
        $("#submit").after('<span class="error">Email Not Valid');
        hasError = true;
    } else if(emailReg.test(emailaddressVal)){
        $("#submit").after('<span class="error">Email Updated');
    }

   if (!hasError) { 
    $.ajax({
       type: "POST",
       url: "updateEmails.php",
       data: "UserEmail="+emailaddressVal,
       success: function(data){
            $(".parentEmail").html(emailaddressVal);
       }
     });
    }

});
});
</script>

<form method="post" name="form1" action="">
<label>Email Address:</label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
开发者_开发知识库<input type="submit" value="Submit" id="btn-submit" />
</form>

it is validating, but, you are displaying the error messages after the element with id "submit" whereas your submit button has id "btn-submit".

You need to modify this:

$("#submit").after(...

to this:

$("#btn-submit").after(...

also add the closing span tags in the html as mentioned by Alastair Pitts