Q:

jQuery - Run loading graphic function only if all form fields are valid

I have the following javascript code to validate a simple login form with user name and password - it's the client validation of an asp.net custom validator if that makes a difference.
    function userValidation(source, arguments) {
        if (arguments.Value != "" && arguments.Value != "User name") {
            if($(source).parents(".loginPanel").find(".errorAsterisk[style*='visible']").length==0) {
                $(source).parents(".loginPanel").css({ "background-color": "" });
            }
            arguments.IsValid = true;
        } else {
            $(source).parents(".loginPanel").css({ "background-color": "#ECC8C8" });
            arguments.IsValid = false;
        }
    }

    function passwordValidation(source, arguments) {
        var passVal = /^((?![<>]).){1,64}$/;
        if (arguments.Value != "" && arguments.Value != "Password" && passVal.test(arguments.Value)) {
            if($(source).parents(".loginPanel").find(".errorAsterisk[style*='visible']").length==0) {
                $(source).parents(".loginPanel").css({ "background-color": "" });
            }
            arguments.IsValid = true;
        } else {
            $(source).parents(".loginPanel").css({ "background-color": "#ECC8C8" });
            arguments.IsValid = false;
        }
    }

I also want a "Loading" message to appear when the user successfully fills in the form - here's the code I have for that...
    $(".loginPanel").on("click", "input[id*='Login']", function() {
        loadingPage2("", "Logging in...");
    });

The trouble is, the loading function runs even if the page is not valid.
Any ideas where I can include it so it only runs if everything is valid?
Thanks

A:

Without seing more code you could do this:
var x = [];
function userValidation(source, arguments) {
        if (arguments.Value != "" && arguments.Value != "User name") {
            if($(source).parents(".loginPanel").find(".errorAsterisk[style*='visible']").length==0) {
                $(source).parents(".loginPanel").css({ "background-color": "" });
            }
            arguments.IsValid = true;
            x.push(true);
        } else {
            $(source).parents(".loginPanel").css({ "background-color": "#ECC8C8" });
            arguments.IsValid = false;
        }
    }

    function passwordValidation(source, arguments) {
        var passVal = /^((?![<>]).){1,64}$/;
        if (arguments.Value != "" && arguments.Value != "Password" && passVal.test(arguments.Value)) {
            if($(source).parents(".loginPanel").find(".errorAsterisk[style*='visible']").length==0) {
                $(source).parents(".loginPanel").css({ "background-color": "" });
            }
            arguments.IsValid = true;
            x.push(true);
        } else {
            $(source).parents(".loginPanel").css({ "background-color": "#ECC8C8" });
            arguments.IsValid = false;
        }
    }

function loading(){
    var confirmx = true;
    for (var i = 0; i < x.length; i++) {
        if (x[i] != true) {
            confirmx = false;
        }
    }
    if (confirmx){
        $(".loginPanel").on("click", "input[id*='Login']", function() {
            loadingPage2("", "Logging in...");
        });
    }
}
loading();  // run it!

The only thing you need to check is that this code runs after all validation functions. So put this code in the end of the script.

