ASP.NET，MVC4，Unobtrusive Validation - 在bootstrap手风琴中将错误摘要显示为叠加

Question

I have a form where content is dynamically added as new accordion-part which can be collapsed and expanded. The added content has the same model behind which is validated correct.

What I want is to have some kind of error-indicator on the header (where the added part can be collapsed/expanded), showing the errors of the inside-part as overlay. But this only when the part is collapsed (so the user knows that there are errors inside and he has to expand the content).

In case it is expanded, the ValidationMessageFor() helper is doing fine.

My idea here:

• bind to some event to know when the form is invalid
• check if there are errors inside an collapsed element
• if so, add icon with mouseover-overlay to the header of this content

The quesion:

• How can this be achieved?

Update #1

The header looks like this:

    <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>

I want to have the icon next to the <span> which contains the title showing the summarized errors on mouseover and only if the content below is collapsed.

The content is something like:

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

If the container with id "@(eventId)Content" has the class in it is expanded, so I could check for non-existence of this class to determine if the content is collapsed.

But still I have no idea how to hook on the the form contains errors-event to make further changes to the DOM depeding on where those errors are and if the container is collapsed/expanded.

Update #2

The jQuery-part looks like:

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

Answer 1

How about using ValidationSummary() in the header?

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

As to the updated code in the question: I don't have any way to try this at the moment, so this is all example code that might help you get to forward.

You can check the entire form for errors by class (but I'm not sure at the time of writing what the class name for the errors is), and traverse to the corresponding 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();
     }
   });
}

As for the validation, place a call to checkForErrors() after the validation has failed. One way to do that might be:

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

Or

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

I tested it quickly in Bootply ( http://www.bootply.com/JqVsSaXnHM ). The first accordian has no fake error, the second has an error.