ASP.NET, MVC4, ненавязчивая проверка-показать ошибку-резюме как наложение в bootstrap accordion

У меня есть форма, в которой содержимое динамически добавляется как новая аккордеонная часть, которая может быть свернута и расширена. Добавленное содержимое имеет ту же модель, за которой проверяется правильность.

Что я хочу, так это иметь какой-то индикатор ошибок в заголовке (где добавленная часть может быть свернута/развернута), показывающий ошибки внутренней части как наложение. Но это только тогда, когда часть свернута (так что пользователь знает, что внутри есть ошибки, и он должен развернуть содержание).

В случае его расширения помощник 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>

Если контейнер с идентификатором "@(eventId)Content " имеет класс in, он расширяется, поэтому я мог бы проверить отсутствие этого класса, чтобы определить, свернуто ли содержимое.

Но все равно я понятия не имею, как зацепиться за the form contains errors-event, чтобы внести дальнейшие изменения в DOM depeding, где эти ошибки возникают и в том случае, если контейнер свернут/развернут.

Обновление #2

JQuery-часть выглядит следующим образом: 

form.validate().settings.ignore = ":disabled";
form.submit();
1 3
jquery twitter-bootstrap asp.net-mvc-4 unobtrusive-validation

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 первый аккордеон не имеет поддельной ошибки, второй имеет ошибку.

3