Expanding an Accordion Pane on Invalid Validation

Question

I have a collection of AccordionPanes containing various TextBox controls and DropDownLists, each with their own validators.

If a few server-side validations occur on form submit, is there something that can automatically expand a previously minimized pane that contains the invalid validator message? Otherwise, it will seem to the user that the form isn't submittable without reason.

Another scenario: Let's say I have multiple panes with client side validators tied to the inputs. If a pane is minimized (and therefore you can't see the validator's ErrorMessage), is there a way to expand the appropriate pane when the AJAX page validation occurs on submit?

I know there's a brute-force way to this approach, where I keep track of every validator and their associated AccordionPane, but I was hoping for a better solution that can handle my situation for a large number of inputs/validators and panes.

Answer 1

How about something like this (using JQuery but I'm sure it can be converted into plain javascript)...

$(document).ready(function(){
    if (isPostback()){
        $.each(Page_Validators, function(index, validator) {
            if (!validator.isvalid) {
            // do something here to locate the accordion based on the validator
            // $(this) is the currently invalid validator element as a jquery object/wrapped set
            // so for example...
                $(this).parent().slideDown();
            // This assumes that the immediate parent of of the validator is the accordion which is unlikely but if you post your emitted html I can write the appropriate selector for you.  
            }
        });
    }
});

Because you dont want it to fire on initial load you can use a technique like this How to detect/track postback in javascript? and check if you are in a postback after the document.ready - I have assumed you've used the advice in the link and your function for postback detection is called isPostback().

Answer 2

there is a project built for this issue try to take a look at it....you can also download the source to analysis more details or use the same code-base if you want....http://www.codeproject.com/Articles/43397/Validating-Accordion-and-RadPanelBar-using-Ajax-an

Answer 3

Rich beat me to it, but here's the vanilla js version (ie9+):

Page_Validators
    .filter(function(v) { return !v.isvalid; })
    .forEach(function (v) { console.log(v.parentNode); });

Remember to place the code beneath the </form>-tag. I've had issues with using jQuerys document.ready and window.onload, since it might execute the code before all the needed JavaScript from asp.net is loaded.

Update: A more browser compatible version

for(var i = 0; i < Page_Validators.length; i++) {
    var validator = Page_Validators[i];
    if (!validator.isvalid) {
        console.log(validator.parentNode);
    }
}