javascriptasp.netvb.netmicrosoft-ajax

Expanding an Accordion Pane on Invalid Validation


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.


Solution

  • 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().