Remarkable. If you just create a new ASP.Net MVC 5 project, it comes with Bootstrap enabled. If you have selected to include scaffolded code for Individual user accounts, you also get e.g. a log in form generated for you. Now, just click the Log in button and look at the visual design of the validation errors. It does not use Bootstraps e.g. has-error on the form-group, hence you loose some “intended” Bootstrap validation behavior. There are various tips for this. Mine consists of a tiny piece of JavaScript and then you are done with it. Lets have a look.

Create the project

I just started Visual Studio 2013 and created a new ASP.Net Web Application and went through the dialogs to get a MVC project created for me, according to the following screenshots:

bs-mvc-jq-val-file-new-project-a

bs-mvc-jq-val-file-new-project-b

Inspect the initial design

Just hit F5 and go to the log in view and click Log in. You will see something like this:

bs-mvc-jq-val-login-validation-ugly

As you can see it does miss some markup as suggested in the Bootstrap docs. Lets fix it.

The solution

Just add a JavaScript file, e.g. _extensions.js in the Scripts folder and then include it in the BundleConfig:

bs-mvc-jq-val-add-bundle

The file it self should hook into the jQuery.validator via its extension points.

(function ($) {
        var defaultOptions = {
            errorClass: 'has-error',
            validClass: 'has-success',
            highlight: function (element, errorClass, validClass) {
                $(element).closest(".form-group")
                    .addClass(errorClass)
                    .removeClass(validClass);
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).closest(".form-group")
                .removeClass(errorClass)
                .addClass(validClass);
        }
    };

    $.validator.setDefaults(defaultOptions);

    $.validator.unobtrusive.options = {
        errorClass: defaultOptions.errorClass,
        validClass: defaultOptions.validClass,
    };
})(jQuery);

Now, compile and look at the same log in view again and kick of the validation:

bs-mvc-jq-val-login-validation-bootstrapified

That was all for now. Hope you find it useful.

Cheers,

//Daniel

Category:
ASP.Net MVC & WebAPI, Development, JavaScript
Tags:
, , , ,

Join the conversation! 13 Comments

  1. […] ASP.Net MVC 5 – quick tip for unobtrusive validation and Bootstrap styling – Daniel Wertheim […]

    Reply
  2. Nice… Simple e very usefull!
    Congrats…

    Reply
  3. Thank you! This is the most elegant solution for integrating Asp.Net MVC / jQuery.validation with Bootstrap 3 styles.

    Reply
  4. Not working for me,, I have followed the same steps.. .as u have mentioned

    Reply
    • I just tried it again.

      0) Open VS2013 (Update 3)
      1) File new project
      2) .Net 4.5.1, MVC
      3) Update all NuGets
      4) Add a file _extensions.js with the JS
      5) Include it in the jqueryval script bundle

      Works.

      Not sure what you might have missed. But this, I tried right now.

      Reply
    • I had the same problem kaushik Thanki, the problem was that my bundleconfig loaded the _extension.js file before jquery.validation.js and jquery.validation.unobtrusive.js hence the extension could not hook into jquery validation since it wasn’t loaded yet.

      So make sure jquery validation is loaded BEFORE the _extension.js file, whatever you chose to name it (I named it jquery.validation.extension.js)

      i.e. like so:

              bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                  "~/scripts/jquery.validate.js",
                  "~/scripts/jquery.validate.unobtrusive.js",
                  "~/scripts/jquery.validate.extension.js"));
      

      @danielwertheim, thank you very much, great work, simple and straight to the point, perfect KISS principle implementation!

      Reply
  5. Thanks you very much. You helped me a lot in my project by this post.

    Reply
  6. I’ve seen different methods to implement bootstrap validation classes, but this one is the most appropriate and elegant one. Thanks.

    Reply
  7. If it isn’t working, also make sure you wrap the form elements in a div with the class form-group.

    Reply
  8. I’ve spent too many hours trying to solve this and once I found your site it was over in a matter of minutes. Thank you so much!!!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: