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.

@ianpgall Yes, but how do I know which validator is causing the error? — danyim, Oct 02 '12 at 17:25
are you using asp:validator controls? if yes then try using SetFocusOnError="true" attrib... — Scorpio, Oct 08 '12 at 14:00

score 3 · Accepted Answer · edited May 23 '17 at 11:43

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

I agree, a solution using jQuery would make short work of this problem, but unfortunately my company does not/cannot use that library. I'll need a solution using the Microsoft AJAX library if anything — danyim, Oct 09 '12 at 22:07
Is the restriction on using other libraries or on putting custom script in the HTML instead of it being injected by the scriptmanager? If the latter you could use scriptmanager.registerstartupscript and emit the js in jans answer — Rich Andrews, Oct 10 '12 at 07:00

Jan Sommer · Answer 2 · 2012-10-10T04:41:56.423

1

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

edited Oct 10 '12 at 04:41

answered Oct 08 '12 at 13:56

Jan Sommer

3,698
1
21
35

I am assuming you're talking about the Vanilla JS library (http://vanilla-js.com/) and not plain, ECMA-derived Javascript. Please see Rich's answer--essentially, I can't use any other library other than Microsoft AJAX. – danyim Oct 09 '12 at 22:15
The site you're linking to is making fun of people using JS-libraries to do stuff that's already supported in recent browsers. No, this code is JavaScript 1.6: https://developer.mozilla.org/en-US/docs/JavaScript/New_in_JavaScript/1.6 – Jan Sommer Oct 10 '12 at 04:36

score 1 · Answer 3 · answered Oct 08 '12 at 17:42

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

Expanding an Accordion Pane on Invalid Validation

3 Answers3