MVC Twitter Bootstrap Unobtrusive Error Handling

MVC4 Validation with razor and twitter bootstrap

Have you tried this script?

http://blog.ijasoneverett.com/2013/05/asp-net-mvc-validation-with-twitters-bootstrap/

I use something similar for getting bootstrap and mvc validation to play nice

MVC4 Validation with razor and twitter bootstrap

Have you tried this script?

http://blog.ijasoneverett.com/2013/05/asp-net-mvc-validation-with-twitters-bootstrap/

I use something similar for getting bootstrap and mvc validation to play nice

Fire jquery unobtrusive validation with bootstrap , Asp.net Mvc 3 and backbone

Here is my method for replacing jquery error messages with bootstrap styles when using mvc unobtrusive validation:

 /*
 * Form Validation
 * This script will set Bootstrap error classes when form.submit is called.
 * The errors are produced by the MVC unobtrusive validation.
 */
 $(function () {
     $('form').submit(function () {
         $(this).find('div.control-group').each(function () {
             if ($(this).find('span.field-validation-error').length == 0) {
                 $(this).removeClass('error');
             }
         });

         if (!$(this).valid()) {
             $(this).find('div.control-group').each(function () {
                 if ($(this).find('span.field-validation-error').length > 0) {
                     $(this).addClass('error');
                 }
             });
         }
     });
     $('form').each(function () {
         $(this).find('div.control-group').each(function () {
             if ($(this).find('span.field-validation-error').length > 0) {
                 $(this).addClass('error');
             }
         });
     });
 });
 var page = function () {
     //Update that validator
     $.validator.setDefaults({
         highlight: function (element) {
             $(element).closest(".control-group").addClass("error");
         },
         unhighlight: function (element) {
             $(element).closest(".control-group").removeClass("error");
         }
     });
 } ();
 /* End Form Validation */

There is some talk in the comments for the question, but the tech behind this script is Asp.Net MVC ViewModel object decorated with Data Annotations ([Required] in my login case), which is passed to a View and displayed with the following (only included relevant bits unless more is required).

@using (Html.BeginForm())
{
    ...
    <div id="errors"></div>
    @Html.ValidationSummary(true, "Sign in was unsuccessful", new { @class = "alert alert-block alert-error" })
    <div id="laatikko" class="well">
        <div class="control-group">
        <label for="kayttajaTunnus" class="control-label">@Kaannokset.Yhteiset.Sähköposti</label>
        <div class="controls">
            @Html.TextBoxFor(m => m.kayttajaTunnus)
            @Html.ValidationMessageFor(m => m.kayttajaTunnus, null, new { @class = "help-inline" })
        </div>
    </div>
    <div class="control-group">
        <label for="salasana" class="control-label">@Kaannokset.Yhteiset.Salasana</label>
        <div class="controls">
            @Html.PasswordFor(m => m.salasana)
            @Html.ValidationMessageFor(m => m.salasana, null, new { @class = "help-inline error" })
        </div>
    </div>
    <input id="signIn" class="btn btn-primary" data-loading-text="Searching for user..." type="submit" value="Sign In" />
}

Apply Twitter Bootstrap Validation Style and Message to ASP.NET MVC validation

I suggest to include Bootstrapper in less format and do the same thing as Iridio suggested but in .less.
That way you could have something like:

.validation-summary-errors
{
    .alert();
    .alert-error();
}
.field-validation-error 
{
    .label();
    .label-important();
}

so when bootstrapper will change you'll pick up the changes automatically.
Regular styles that handle visibility from MVC default Site.css will stay in place and handle visibility.

How do I resolve jquery-validate + bootstrap has-error conflict

I found out the problem.

In my bundle I had:

"~/Scripts/components/vendor/validator.js"

This was brought in from a third party table plugin, but it conflicts with bootstrap + MVC integration.

validator.js is a bootstrap plugin found here: github.com/1000hz/bootstrap-validator so I'm raising the issue there.

I'm going to have to be more careful with bringing in third-party plugins and make more of my own :p

ASP.NET, MVC4 , Unobtrusive Validation - Show error-summary as overlay in bootstrap accordion

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.

Integrating Twitter Bootstrap with Asp.net MVC 3 forms

I encountered the same challenge and with some help for the labels (see below), here is what I got :

<div class="control-group @if (!ViewData.ModelState.IsValidField("Name")) { @Html.Raw("error"); }">
    @Html.LabelFor(model => model.Name, new {@class = "control-label"})
    <div class="controls">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name, null, new {@class = "help-inline"})
    </div>
</div>

Html.LabelFor implementation : https://stackoverflow.com/a/6722082

I didn't try with the unobstrusive validation, but it seems you just have to activate it.

If you are looking for a global error, you should use something like :

@if (ViewData.ModelState.IsValid == false) {
    <div class="alert alert-error"><button class="close" dismiss="alert">x</button><!-- some text--></div>
}

There is a live example (in french) here : http://ws.sherbrow.fr/auth

The whole project source code should be available some time soon (see my profile - or ask me directly).

---

Related Topics