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?

Demarche

I can't answer this as I've not tried it. But validators can be triggered/managed at the client-side. Try reading this msdn.microsoft.com/en-us/library/aa479045.aspx though dated 2002, it helped me with my validation problem recently. – Lachish

ok, thanks for the msdn link, as you said it's dated but good background noise (info), which helped me on my way to an answer. – Demarche

i have similar condition my problem is that validation summary calls twice if both group fails. – Runesmith

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>

Demarche

this is an excellent answer. helped me solve the problem i was having no problem. thanks Niall – Phonemic

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;
};

Amphiprostyle

This is a much better, more generic answer. Thanks @Colin. There's a slight problem with it, but I'm going to edit it with a correction to make it work... – Veiling

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();
}

Shekinah

This helped me with some other problem :) – Pierrepierrepont

Answer 4

this is an extension of joedotnot's useful code. It is probably overkill for the majority of asp.net users, but this helped with a project where different combinations of validation groups had to be applied on submit, depending on which buttons had been selected.

  var validationManager = function () {
        // Manual client-side validation of Validator Groups 
        // an empty string('') is default - to validate controls without a validation group
        var valGroups = [''],
        returnObj = { //define methods
            set: function (/*string argument list*/) {
                valGroups = Array.prototype.slice.call(arguments);
                return returnObj;
            },
            add: function (/*string argument list*/) {
                var i;
                for (i = 0; i < arguments.length; i++) {
                    if (valGroups.indexOf(arguments[i]) === -1) {
                        valGroups.push(arguments[i]);
                    }
                }
                return returnObj;
            },
            remove: function (/*string argument list*/) {
                var i = 0, n = 0;
                for (i = 0; i < arguments.length; i++) {
                    var n = valGroups.indexOf(arguments[i]);
                    if (n > -1) valGroups.splice(n, 1);
                }
                return returnObj;
            },
            validate: function () {
                var i = 0,
                    summariesToDisplay = [];
                for (; i < valGroups.length; i++) {
                if (!Page_ClientValidate(valGroups[i])) { //this will display the contents of the validator
                   summariesToDisplay.push(valGroups[i]);
                  }
                }
                if (!summariesToDisplay.length) { return true; }
                for (i = 0; i < Page_ValidationSummaries.length; i++) { //make relevant summaries visible
                if (summariesToDisplay.indexOf(Page_ValidationSummaries[i].validationGroup || '') > -1) {
                      Page_ValidationSummaries[i].style.display = "inline"; //"none"; "inline";
                    }
                }
                return false;
            }
         };
        if (arguments.length > 0) {
            returnObj.set.apply(null, arguments);
        }
        return returnObj;
    }

then in the various event handlers:

    //set up a global object
    var validateOnSubmit = validationManager('','BMIvalGrp');

    //within a radio click handler
    validateOnSubmit.add('weightValGrp','ageValGrp')
                    .remove('BMIvalGrp');

    //added to submit button handlers
    validateOnSubmit.validate();

Gobang

Answer 5

Here it is to keep it simple, a very simple example:

Have the below javascript method in your Page Header:-

<script type="text/javascript" language="javascript">
function ShowModalDialog4Validations() {
    var x = $find("modalPopupExtenderValidations");
    Page_ClientValidate("vgValidations");
    if (!Page_IsValid)
        x.show();
}

modalPopupExtenderValidations is the ID of the modal popup. vgValidations is the ID of the Validation Group.

Now, in the page prerender method add the onclick attribute to your button on which you want the validation should occur.

protected void Page_PreRender(object sender, EventArgs e)
    {
        btnMyButton.Attributes.Add("onclick", "ShowModalDialog4Validations();");
    }

I hope its easy to understand.

Bye.

Bamby

This doesn't seem to relate to the question. Specifically, this does not solve the problem of showing the summaries to multiple validation groups on a page. – Knuth

Answer 6

<b>Lets Say here is u r link button</b>
<asp:LinkButton ID="lnkbtnSubmit" runat="server" OnClientClick="return fnJSOnFormSubmit();" meta:resourcekey="lnkbtnSubmitResource1">Submit</asp:LinkButton>
<b> And u r Script is</b>
<script type="text/javascript">


    function confirmAction() {
        var retVal = confirm("Are you sure want to continue ?");
        if (retVal == true) {

            return true;
        }
        else {

            return false;
        }
    }

    function fnJSOnFormSubmit() {
        var isGrpOneValid = Page_ClientValidate("updateuser");
        var isGrpTwoValid = Page_ClientValidate("BaseKey");

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

        isGrpOneValid = Page_ClientValidate("updateuser");
        isGrpTwoValid = Page_ClientValidate("BaseKey");

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

        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>

Unscreened