Show ValidationSummary MVC3 as "alert-error" Bootstrap

Question

I want to show ValidationSummary mcv3 with Bootstrap style "alert-error".

I am using the Razor view and I am showing model errors with this code:

@Html.ValidationSummary(true, "Errors: ") 

It generates HTML code as follows:

 <div class="validation-summary-errors"> <span>Errors:</span> <ul> <li>Error 1</li> <li>Error 2</li> <li>Error 3</li> </ul> </div> 

I also tried:

 @Html.ValidationSummary(true, "Errors:", new { @class = "alert alert-error" }) 

and it works fine, but without a close button (X)

It generates HTML code as follows:

 <div class="validation-summary-errors alert alert-error"> <span>Errors:</span> <ul> <li>Error 1</li> <li>Error 2</li> <li>Error 3</li> </ul> </div> 

but the Bootstrap warning should contain this button in the div:

 <button type="button" class="close" data-dismiss="alert">×</button> 

Can anyone help?

---

It works! - Thanks Rick B

 @if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0) { <div class="alert alert-error"> <a class="close" data-dismiss="alert">×</a> <h5 class="alert-heading">Ingreso Incorrecto</h5> @Html.ValidationSummary(true) </div> } 

I also had to remove the ".validation-summary-errors" class from "site.css" because this style defines a different font color and weight.

Answer 1

edited again

At first I misunderstood your question. I think you need the following:

 @if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count > 0) { <div class="alert alert-error"> <button type="button" class="close" data-dismiss="alert">×</button> @Html.ValidationSummary(true, "Errors: ") </div> } 

Answer 2

This answer is based on RickB one.

• Updated for last boot == → alert-error does not exist in favor of alert-danger .

• Works for all validation errors not only Key String.Empty ("")

For those using Bootstrap 3 and trying to get nice search alerts:

 if (ViewData.ModelState.Keys.Any(k=> ViewData.ModelState[k].Errors.Any())) { <div class="alert alert-danger"> <button class="close" data-dismiss="alert" aria-hidden="true">&times;</button> @Html.ValidationSummary(false, "Errors: ") </div> } 

The solution provided by RickB only works with manually added errors (String.Empty key), but not with those generated by ModelState (this is usually started first with javascript, but it is always good practice to have a rollback if (for example) there is no Html.ValidationMessageFor or many other situations.

Answer 3

An alternative solution. =)

 @if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) { // Bootstrap 2 = "alert-error", Bootstrap 3 and 4 = "alert-danger" <div class="alert alert-danger alert-error"> <a class="close" data-dismiss="alert">&times;</a> @Html.ValidationSummary(true, "Errors: ") </div> } 

Answer 4

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

Answer 5

I didn't like how rendering ValidationSummary using a list of tokens (unordered list). There was a lot of unnecessary space in the error list.

The solution to this problem is to simply skip errors and make mistakes as you want. I used paragraphs. For example:

 @if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) { <div class="alert alert-danger" role="alert"> <a class="close" data-dismiss="alert">×</a> @foreach (var modelError in Html.ViewData.ModelState.SelectMany(keyValuePair => keyValuePair.Value.Errors)) { <p>@modelError.ErrorMessage</p> } </div> } 

The result, in my case, looks something like this:

Answer 6

Consider writing an extension method in HtmlHelper, for example:

 public static class HtmlHelperExtensions { public static HtmlString ValidationSummaryBootstrap(this HtmlHelper htmlHelper) { if (htmlHelper == null) { throw new ArgumentNullException("htmlHelper"); } if (htmlHelper.ViewData.ModelState.IsValid) { return new HtmlString(string.Empty); } return new HtmlString( "<div class=\"alert alert-warning\">" + htmlHelper.ValidationSummary() + "</div>"); } } 

Then you just need to put the ul-li style in the stylesheet.

Answer 7

In MVC 5, ViewData.ModelState[""] always returns a null value. I had to resort to the IsValid team.

 if (!ViewData.ModelState.IsValid) { <div class="alert alert-danger"> <a class="close" data-dismiss="alert">×</a> <strong>Validation Errors</strong> @Html.ValidationSummary() </div> } 

Answer 8

I took a slightly different path: using jQuery to connect to the submit form:

 $('form').each(function() { var theForm = $(this); theForm.submit(function() { if ($(this).valid()) { if ($(this).find('.validation-summary-valid').length) { $('.validation-summary-errors').hide(); } } else { if ($(this).find('.validation-summary-errors').length) { $('.validation-summary-errors') .addClass('alert alert-error') .prepend('<p><strong>Validation Exceptions:</strong></p>'); } } }); }); 

I have this set inside a javascript self-executing module so that it intercepts all the summaries I create.

NTN

Chuck

Answer 9

You can use jquery:

 $(function(){ $('.validation-summary-errors.alert.alert-error.alert-block').each(function () { $(this).prepend('<button type="button" class="close" data-dismiss="alert">×</button>'); }); }); 

It searches for every div containing the given error classes from bootstrap and html entry at the beginning of the div. I am adding the .alert-block class as the boot page says:

For longer messages, increase the filling at the top and bottom of the error notification by adding a .alert block.

Answer 10

TwitterBootstrapMVC will take care of this with only one line:

 @Html.Bootstrap().ValidationSummary() 

It is important to make sure that it behaves the same during checks on the server side and on the client side (unobtrusive), you need to add a javaScript file that will take care of this.

You can configure the Validation helper using extension methods, but you find it appropriate.

Disclaimer: I am the author of TwitterBootstrapMVC. Using it with Bootstrap 3 requires a license.

Answer 11

Alternative solution with pure javascript (jQuery). I work with MVC4 + Bootstrap3, but it works great for you.

 $(function () { $(".validation-summary-errors").addClass('alert alert-danger'); $(".validation-summary-errors").prepend('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>') }); 

If you do not want to write server-side logic, this is a good alternative solution.

Answer 12

This solution uses Sass to make it work, but you could achieve the same element with basic css. To do this work with client-side validation, we cannot rely on ModelState validation, as this assumes that a postback has occurred. The mvc client-side validated check already makes things visible at the right time, so let it do its job and simply style the list items in the check summary to display as download alerts.

Razor Markings:

 @Html.ValidationSummary(false, null, new { @class = "validation-summary-errors-alerts" }) 

Sass

 .validation-summary-errors-alerts{ ul{ margin: 0; list-style: none; li{ @extend .alert; @extend .alert-danger; } }} 

The css created for my project looked like this: yours will be different:

 .validation-summary-errors-alerts ul li { min-height: 10px; padding: 15px 20px 15px 62px; position: relative; border: 1px solid #ca972b; color: #bb7629; background-color: #fedc50; font-family: Arial; font-size: 13px; font-weight: bold; text-shadow: none;} 

Answer 13

By deploying Daniel Björk's solution, you can include a little script to customize the CSS included in the output of ValidationSummary() . The bootstrap message that came up showed a rendering problem until I removed the validation-summary-errors class.

 @if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) { <div class="alert alert-danger"> <a href="#" class="close" data-dismiss="alert">&times;</a> <h4>Validation Errors</h4> @Html.ValidationSummary() </div> } <script> $(".validation-summary-errors").removeClass("validation-summary-errors"); </script> 

You can also easily allocate a botstrap for error fields. See http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/

Answer 14

To achieve the same in bootstrap 4, use the following:

  @if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0) { <div class="col-auto alert alert-danger" role="alert"> @Html.ValidationSummary(true) </div> } 

Answer 15

If this should work with client-side JavaScript, I suggest doing this:

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

You can still assign a bootstrap class

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

but it will only show when you have real errors.