Jquery ASP.NET、MVC4、不引人注目的验证-在引导程序中以覆盖形式显示错误摘要

我有一个表单，其中的内容是动态添加为新的手风琴部分，可以折叠和扩展。添加的内容与验证正确的模型相同

我想要的是在标题上有某种类型的错误指示器（添加的零件可以折叠/展开），将内部零件的错误显示为覆盖。但这只有在零件折叠时才会发生（因此用户知道里面有错误，他必须展开内容）

如果扩展了它，则

ValidationMessageFor（）

helper会正常工作

我的想法是：

• 绑定到某个事件以了解表单何时无效
• 检查折叠图元内是否存在错误
• 如果是，请将带有鼠标覆盖的图标添加到此内容的标题

问题是：

• 如何做到这一点

更新#1

标题如下所示：

    <a data-toggle="collapse" data-parent="#tourStops" href="#@(eventId)Content" aria-expanded="true" aria-controls="@(eventId)Content">
        <div class="panel-heading btn-heading" role="tab" id="heading@(eventId)">
            <span class="pull-left" id="eventName@(eventId)">Event name</span>
            <button class="btn btn-danger btn-sm" data-tourstop-id="@eventId" id="RemoveTourStopButton" style="z-index: 100;">@Translator.TranslateTour(Keys.Tour.CreateRemoveTourStop)</button>
        </div>
    </a>

在标题中使用如何

ValidationSummary方法显示页面上所有验证消息的列表

至于问题中的更新代码：我目前没有任何方法来尝试这一点，所以这是所有可能帮助您前进的示例代码

您可以按类检查整个表单中的错误（但在编写错误类名时我不确定），并遍历到相应的标题：

function checkForErrors() {
   $('form').find(".field-validation-error").each(function() {
     var panelElement = $(this).closest('.panel-collapse');
     if (!panelElement.hasClass('in')) {
       var idOfHeader = panelElement.attr('aria-labelledby');
       $('#'+idOfHeader).find('.customErrorClass').html('<span class="glyphicon glyphicon-exclamation-sign" title="This section contains errors"></span> ').show();
     }
   });
}

或

---

我在Bootply（）中快速测试了它。第一个手风琴没有假错误，第二个手风琴有错误。

这将始终显示标题中所有错误的列表。我需要一个图标，它有一个包含摘要的鼠标盖，该摘要仅在容器折叠时显示。如果对其进行扩展，则错误将显示在存在错误的输入旁边。请更新您的问题，并提供相关的代码示例，如accordian和jquery验证/提交事件。

form.validate().settings.ignore = ":disabled";
form.submit();

function checkForErrors() {
   $('form').find(".field-validation-error").each(function() {
     var panelElement = $(this).closest('.panel-collapse');
     if (!panelElement.hasClass('in')) {
       var idOfHeader = panelElement.attr('aria-labelledby');
       $('#'+idOfHeader).find('.customErrorClass').html('<span class="glyphicon glyphicon-exclamation-sign" title="This section contains errors"></span> ').show();
     }
   });
}

$.validator.unobtrusive.parse($('form'));
if (!$('form').valid()) {
    checkForErrors();
}

$('form').bind('invalid-form.validate', function (form, validator) {
   checkForErrors();
});