Question

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

我想要的是在标题上有一些错误指示符（添加的部分可以折叠/展开），将内部部分的错误显示为叠加。但这仅在部件折叠时（因此用户知道内部存在错误并且他必须扩展内容）。

如果它被扩展，ValidationMessageFor()助手就可以了。

我的想法在这里：

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

问题：

如何实现这一目标？

更新＃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为＆＃34; @（eventId）Content＆＃34;它已扩展了类in，因此我可以检查此类是否存在以确定内容是否已折叠。

但我仍然不知道如何挂钩the form contains errors-event以对DOM进行进一步更改，这取决于这些错误的位置以及容器是否已折叠/展开。

更新＃2

jQuery-part看起来像：

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

Answer 1

如何在标题中使用ValidationSummary()？

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

对于验证，在验证失败后调用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，Unobtrusive Validation - 在bootstrap手风琴中将错误摘要显示为叠加

1 个答案: