Dynamically show bootstrap's surrounding error div on ValidationSummary?

Question

I have a ASP .NET MVC 4.5 that uses Razor View Engine. I also added Bootstrap to it.

My doubt is: How do I dynamically show or hide a div according to the @Html.ValidationSummary()? - preferably without JQuery.

In my specific case, there's a form which contains several inputs. Whenever a validation error occours (eg. empty field), I intend to show the associated error message in a single div.

<div class="alert alert-danger">
@Html.ValidationSummary();
</div>

Thanks in advance.

Answer 1

This is all built into MVC no reason for any sort of hacking.

Simply use:

@Html.ValidationSummary(false, "", new { @class = "alert alert-danger" })

Assitionally some CSS to hide it when there are no errors:

.validation-summary-valid.alert-danger {
    display: none;
}

Much easier, much cleaner.