ASP.NET、MVC4、不显眼的验证 - 在 bootstrap 手风琴中显示 error-summary 作为叠加层

Question

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

我想要的是在header（添加的部分可以是collapsed/expanded）上有某种error-indicator，显示inside-part的错误作为覆盖。但这只有当部分被折叠时（所以用户知道里面有错误，他必须展开内容）。

万一它被展开，ValidationMessageFor() 帮助器就很好。

我的想法：

绑定到某个事件以了解表单何时无效
检查折叠元素内是否有错误
如果是，请将带有 mouseover-overlay 的图标添加到此内容的 header

问题：

如何实现？

更新 #1

header 看起来像这样：

    <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”的容器有 class in 它会被展开，所以我可以检查这个 class 的 non-existence确定内容是否折叠。

但我仍然不知道如何挂钩 the form contains errors-event 以根据这些错误的位置以及容器是否为 collapsed/expanded 对 DOM 进行进一步更改。

更新 #2

jQuery-part 看起来像：

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

Answer 1

在 header 中使用 ValidationSummary() 怎么样？

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

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

可以通过class来检查整个表单是否有错误（但是我在写的时候还不确定错误的class名称是什么），然后遍历到相应的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) 中快速测试了它。第一个手风琴没有假错误，第二个有错误。

ASP.NET、MVC4、不显眼的验证 - 在 bootstrap 手风琴中显示 error-summary 作为叠加层

ASP.NET, MVC4 , Unobtrusive Validation - Show error-summary as overlay in bootstrap accordion

jquery

unobtrusive-validation

asp.net-mvc-4

twitter-bootstrap