jQuery - Check certain fields are filled in then validate email

Question

Just been trying to piece together two functions using jQuery. On submission on the form the code checks to see if all fields are filled in, then if all of that is correct it moves onto another function where it checks e-mail validation.

I think I'm close as when I press submit the validate alert shows up for a millisecond then it submits (which I don't want it to as the email used is invalid). I'm pretty sure it's simple enough code, therefore I kept away from any form validations.

Here is the code:

<script type="text/javascript"> 
    $("#test").submit(function(){
        $(".error").hide();

        var isFormValid = true;

        $(".required").each(function(){
            if ($.trim($(this).val()).length == 0){
                $(this).addClass("highlight");
                isFormValid = false;
            }
            else{
                $(this).removeClass("highlight");
            }
        });
        if (!isFormValid) { 
            document.getElementById("error").innerHTML = "You must fill in all of the fields.";
            return isFormValid;
        }
        else {
            myFunction();
        }
    });

    function myFunction() {
        var isEmailValid = true;

        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var emailaddressVal = $("#email").val();

        if (!emailReg.test(emailaddressVal)) {
            $("#email").after('<span class="error">Enter a valid email address.</span>');
            isEmailValid = false;
        }
        else {
            ///ajax post function here///
        }

        if(!isEmailValid) {
            document.getElementById("error").innerHTML = "Please enter a valid email address.";
            return isEmailValid;
        }
    }
</script>

Answer 1

Try this:

<script type="text/javascript"> 
$("#test").submit(function(){
    $(".error").hide();

    var isFormValid = true;

    $(".required").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("highlight");
            isFormValid = false;
        }
        else{
            $(this).removeClass("highlight");
        }
    });
    if (!isFormValid) { 
        document.getElementById("error").innerHTML = "You must fill in all of the fields.";
        return isFormValid;
    }
    else {
        return myFunction();//should return true or false
    }
});

function myFunction() {
    var isEmailValid = true;

    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var emailaddressVal = $("#email").val();

    if (!emailReg.test(emailaddressVal)) {
        $("#email").after('<span class="error">Enter a valid email address.</span>');
        isEmailValid = false;
    }
    else {
        ///ajax post function here///
    }

    if(!isEmailValid) {
        document.getElementById("error").innerHTML = "Please enter a valid email address.";
        return isEmailValid;
    }
    return isEmailValid;//should return true or false
}
</script>