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! 9 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

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: