jquery - ASP.NET、MVC4、Unobtrusive Validation - 将错误摘要显示为 Bootstrap Accordion 中的覆盖层

Question

我有一个表单，其中内容动态添加为新的 Accordion 部分，可以折叠和展开。添加的内容具有相同的模型，其背后经过验证是正确的。

我想要的是在标题上有某种错误指示器(其中添加的部分可以折叠/展开)，将内部部分的错误显示为覆盖。但这仅在该部分折叠时才有效(因此用户知道内部有错误并且必须展开内容)。

如果展开，ValidationMessageFor()助手做得很好。

我的想法:

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

问题:

• 如何实现这一目标？

更新#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>

我想要 <span> 旁边有图标其中包含的标题显示鼠标悬停时的汇总错误，并且仅当下面的内容折叠时。

内容类似于:

<div id="@(eventId)Content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading@(eventId)">
    <div class="panel-body">
        Awesome content here...
    </div>
</div>

如果 ID 为“@(eventId)Content”的容器具有类 in它已展开，因此我可以检查此类是否不存在，以确定内容是否折叠。

但我仍然不知道如何 Hook the form contains errors-event根据这些错误的位置以及容器是否折叠/展开来对 DOM 进行进一步更改。

更新#2

jQuery 部分如下所示:

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

Answer 1

使用 ValidationSummary() 怎么样？在标题中？

The ValidationSummary method displays a list of all validation messages on the page.

关于问题中更新的代码:我目前没有任何方法可以尝试这个，所以这都是可能帮助您继续前进的示例代码。

您可以按类检查整个表单中的错误(但在撰写本文时我不确定错误的类名是什么)，并遍历到相应的 header :

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

对于验证，在验证失败后调用 checkForErrors() 。一种方法可能是:

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

或者

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

我在 Bootply ( http://www.bootply.com/JqVsSaXnHM ) 中快速测试了它。第一个 Accordion 没有假错误，第二个有错误。