CODEWITHSUNDEEP
cssasp.net-mvctwitter-bootstrapvalidationsummary
Gonzalo
Gonzalo

Reputation: 2876

Show ValidationSummary MVC3 as "alert-error" Bootstrap

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

I'm using a Razor view, and I show model errors with this code:

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

It generates HTML code like this:

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

I tried with this too:

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

and it works ok, but without the close button (X)

It generates HTML code like this:

<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 Bootstrap alert should have this button into the div:

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

Can anyone help?

This 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 class ".validation-summary-errors" from "site.css", because that style defines other font color and weight.

Upvotes: 60

Views: 73726

Answers (16)

Enrico
Enrico

Reputation: 3454

Based on the answers here: 

@if (!ViewData.ModelState.IsValid)
{
    <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert">×</button>
        @Html.ValidationSummary(false, "Errors: ")
    </div>
}

(I'm using Bootstrap 4)

Upvotes: 3

Quarkson
Quarkson

Reputation: 1

If it needs to work with clientside javascript I suggests doing this:

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

You still can assign the bootstrap class 

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

but it will only show when you have actual errors.

Upvotes: 0

Jason Loki Smith
Jason Loki Smith

Reputation: 438

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

Upvotes: 0

Daniel Bj&#246;rk
Daniel Bj&#246;rk

Reputation: 2507

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

Upvotes: 35

Daniel Kereama
Daniel Kereama

Reputation: 951

This solution uses Sass to make it work but you could achieve the same thing with basic css. To make this work with client side validation we cant rely on checking the ModelState since that assumes a postback has occurred. The out-of-the-box mvc client side validation already makes things visible at the right time so let it do its thing and simply style the list items in the validation summary to render like bootstrap alerts.

Razor markup:

@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 that produced 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;}

Upvotes: 2

Bart Calixto
Bart Calixto

Reputation: 19705

This answer is based on RickB's one

  • Updated for the latest bootstrap ==>> alert-error doesn't exist in favor of alert-danger.

  • Works for all Validation Errors not only Key String.Empty ("")

For anyone using Bootstrap 3 and trying to get nice looking 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 works only on manually added errors on (String.Empty key) but not on those generated by ModelState (normally this gets triggered first via javascript but it's always a good practice to have a fallback if (for example) the Html.ValidationMessageFor is missing or many other situations.

Upvotes: 39

Donal
Donal

Reputation: 32713

I did not like how the ValidationSummary rendered using a bullet list (unordered list). It had a lot of unnecessary space below the error list.

A solution to that issue - is simply to loop through the errors and render the errors how 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: enter image description here

Upvotes: 19

Peter Lindstr&#246;m
Peter Lindstr&#246;m

Reputation: 269

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

Upvotes: 14

Rick B
Rick B

Reputation: 1166

edited again

I misunderstood your question at first. I think the following is what you want:

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

Upvotes: 55

m00seDrip
m00seDrip

Reputation: 4021

Expanding upon Daniel Björk's solution you can include a little script to adjust the CSS included with ValidationSummary() output. The resulting bootstrap alert was showing a rendering issue 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 give a bootstrap highlight to fields with errors. See http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/

Upvotes: 0

Dmitry Efimenko
Dmitry Efimenko

Reputation: 11203

TwitterBootstrapMVC takes care of this one with just one line:

@Html.Bootstrap().ValidationSummary()

Important, to assure that it behaves the same during the server side and client side (unobtrissive) validation, you need to include a javaScript file that takes care of that.

You can customize your Validation helper with extension methods however you see fit.

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

Upvotes: 1

Rethic
Rethic

Reputation: 1081

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

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

Upvotes: 6

snekkke
snekkke

Reputation: 441

Alternative solution with pure javascript (jQuery). I'm working with MVC4 + Bootstrap3 but it works perfect 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 don't want to write server side logic then is a nice alternative solution.

Upvotes: 1

oexenhave
oexenhave

Reputation: 191

Consider writing an extension method to the HtmlHelper like:

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 fit the ul-li styling in your stylesheet.

Upvotes: 6

SwampyFox
SwampyFox

Reputation: 1105

I took a slightly different route: using JQuery to hook into the form submit:

$('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 self-executing javascript module so that it hooks onto any validation summaries that I create.

HTH

Chuck

Upvotes: 3

Mariusz
Mariusz

Reputation: 3154

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 is looking for every div containing given error classes from bootstrap and writing html at beginning of the div. I am adding .alert-block class as the bootstrap page says:

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

Upvotes: 2

Related Questions