Question

my website is based off of only one php index file that changes the contents of the site based on the header variables. www.mydomain.com/?page=contact loads and brings up a form that i am having the user fill out.

i have some jQuery that SHOULD detect if there are any missing fields:

$("form").submit(function() {
    var isFormValid = true;
    $(".required").each(function() {
        if ($.trim($(this).val()) == "") {
            $(this).addClass("highlight");
            isFormValid = false;
        } else {
            $(this).removeClass("highlight");
        }
        if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");
        return isFormValid;
    });
});

but it is not working….

Answer 1

Put return isFormValid out of loop (otherwise you are overwriting its value again and again):

$("form").submit(function() {
    var isFormValid = true;
    $(".required").each(function() {
        if ($.trim($(this).val()) == "") {
            $(this).addClass("highlight");
            isFormValid = false;
        } else {
            $(this).removeClass("highlight");
        }

    });

    if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");
    return isFormValid; // put out of loop
});