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:



Inspect the initial design

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


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:


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) {
            unhighlight: function (element, errorClass, validClass) {


    $.validator.unobtrusive.options = {
        errorClass: defaultOptions.errorClass,
        validClass: defaultOptions.validClass,

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


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



ASP.Net MVC & WebAPI, Development, JavaScript
, , , ,

Join the conversation! 9 Comments

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

  2. Nice… Simple e very usefull!

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

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

    • 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


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

    • 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(

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

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


Leave a Reply

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

You are commenting using your 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


Get every new post delivered to your Inbox.

%d bloggers like this: