在无效验证上展开 Accordion 窗格答案

【问题标题】：Expanding an Accordion Pane on Invalid Validation在无效验证上展开 Accordion 窗格
【发布时间】：2012-09-23 12:06:48
【问题描述】：

我有一个 AccordionPanes 集合，其中包含各种 TextBox 控件和 DropDownLists，每个都有自己的验证器。

如果在提交表单时发生了一些服务器端验证，是否有东西可以自动展开包含无效验证器消息的先前最小化的窗格？否则，在用户看来，表单无法无故提交。

另一种情况：假设我有多个窗格，其中 客户端 验证器与输入相关联。如果窗格被最小化（因此您看不到验证器的 ErrorMessage），是否有办法在提交时发生 AJAX 页面验证时展开相应的窗格？

我知道这种方法有一种蛮力方法，我会跟踪每个验证器及其关联的 AccordionPane，但我希望有一个更好的解决方案来处理我的大量输入/验证器和窗格的情况.

【问题讨论】：

不能设置Accordion控件的SelectedIndex吗？
@ianpgall 是的，但我怎么知道是哪个验证器导致了错误？
您使用的是 asp:validator 控件吗？如果是，请尝试使用 SetFocusOnError="true" 属性...
@Scorpio，不会将焦点放在手风琴窗格上

标签： javascript asp.net vb.net microsoft-ajax

【解决方案1】：

这样的事情怎么样（使用 JQuery，但我确信它可以转换为纯 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.  
            }
        });
    }
});

因为您不希望它在初始加载时触发，您可以使用类似How to detect/track postback in javascript? 的技术并检查您是否在 document.ready 之后处于回发状态 - 我假设您已经使用了链接中的建议并且您的回发检测函数称为 isPostback()。

【讨论】：

我同意，使用 jQuery 的解决方案可以解决这个问题，但不幸的是我的公司不/不能使用该库。如果有的话，我需要使用 Microsoft AJAX 库的解决方案
是否限制使用其他库或将自定义脚本放入 HTML 而不是由脚本管理器注入？如果是后者，您可以使用 scriptmanager.registerstartupscript 并在 jans 答案中发出 js

【解决方案2】：

Rich 打败了我，但这里是香草 js 版本（ie9+）：

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

请记住将代码放在标记下方。我在使用 jQuerys document.ready 和 window.onload 时遇到了问题，因为它可能会在加载来自 asp.net 的所有需要的 JavaScript 之前执行代码。

更新：更兼容浏览器的版本

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

【讨论】：

我假设您说的是 Vanilla JS 库 (vanilla-js.com)，而不是简单的 ECMA 派生的 Javascript。请参阅 Rich 的回答——基本上，我不能使用 Microsoft AJAX 以外的任何其他库。
您链接到的网站正在取笑人们使用 JS 库来做最近浏览器已经支持的事情。不，这段代码是 JavaScript 1.6：developer.mozilla.org/en-US/docs/JavaScript/New_in_JavaScript/…

【解决方案3】：

有一个针对这个问题构建的项目尝试看看它....您也可以下载源代码以分析更多细节或使用相同的代码库....http://www.codeproject.com/Articles/43397/Validating-Accordion-and-RadPanelBar-using-Ajax-an

【讨论】：