Page_ClientValidate() with multiple ValidationGroups - how to show multiple summaries simultaneously?

Question

ASP.NET 2.0. Lets say i have two Validation Groups valGrpOne and valGrpTwo; and two Validation Summaries valSummOne and valSummTwo; Reason for breaking up sections is purely aesthetic. One submit button which triggers validation on both groups.

Now i want to trigger Client-Side validation, AND want BOTH validation summaries to display at the same time;

So i setup a Javascript function which gets called upon btnSubmit, and inside this function i call Page_ClientValidate("valGrpOne") and Page_ClientValidate("valGrpTwo") in succession; Problem is only one summary shows at a time (But i really want both to show!)

Any ideas on how to get both validation summaries to display simultaneously, from client-side code?

Very similar to the following question, which answers for server-side. Triggering multiple validation groups with a single button?

Answer 1

Ok, so the answer was not simple. It seems the default behaviour of client-side validation is to show only the lastest group / summary that has just been validated. But a bit of Javascript tweeking gave me an acceptable answer.

Feel free to offer improvements.

   <script type="text/javascript" language="javascript">
    /* Manual client-side validation of Validator Groups */
    function fnJSOnFormSubmit() {
        var isGrpOneValid = Page_ClientValidate("valGrpOne");
        var isGrpTwoValid = Page_ClientValidate("valGrpTwo");

        var i;
        for (i = 0; i < Page_Validators.length; i++) { 
            ValidatorValidate(Page_Validators[i]); //this forces validation in all groups
        }

        //display all summaries.
        for (i = 0; i < Page_ValidationSummaries.length; i++) {
            summary = Page_ValidationSummaries[i];
            //does this summary need to be displayed?
            if (fnJSDisplaySummary(summary.validationGroup)) {
                summary.style.display = ""; //"none"; "inline";
            }
        }

        if (isGrpOneValid && isGrpTwoValid)
            return true; //postback only when BOTH validations pass.
        else
            return false;
    }


    /* determines if a Validation Summary for a given group needs to display */
    function fnJSDisplaySummary(valGrp) {
        var rtnVal = false; 
        for (i = 0; i < Page_Validators.length; i++) {
            if (Page_Validators[i].validationGroup == valGrp) { 
                if (!Page_Validators[i].isvalid) { //at least one is not valid.
                    rtnVal = true;
                    break; //exit for-loop, we are done.
                }
            }
        }
        return rtnVal;
    }
</script>

Answer 2

Here is another simple and generic method for validating against multiple groups.

// Page_ClientValidate only shows errors from the last validation group.  
// This method allows showing for multiple groups
function Page_ClientValidateMultiple(groups) {
    var invalidIdxs = [];
    var result = true;

    // run validation from each group and remember failures
    for (var g = 0; g < groups.length; g++) {
        result = Page_ClientValidate(groups[g]) && result;
        for (var v = 0; v < Page_Validators.length; v++)
            if (!Page_Validators[v].isvalid)
                invalidIdxs.push(v);
    }

    // re-show any failures
    for (var i = 0; i < invalidIdxs.length; i++) {
        ValidatorValidate(Page_Validators[invalidIdxs[i]]);
    }

    // return false if any of the groups failed
    return result;
};

Answer 3

Not fully tested:

/* Manual client-side validation of Validator Groups - Remix */
function PageValidate() {
    var PageIsValid = true;

    for (var validator in Page_Validators) { 
        ValidatorValidate(validator);
        PageIsValid = PageIsValid && validator.isvalid;
    }

    if (PageIsValid) {
        return true; //postback only when ALL validations pass.
    }
    else {
        return false;
    }
}

/* This also does something similar */
function PageValidate() {
    return Page_ClientValidate();
}