Development

Bootstrap validation in ASP.Net MVC

I use Bootstrap in almost every project I build these days. I build up a custom Bootstrap configuration to reduce bloat, and have my workflow down-pat for updating those configurations (which I’ll write about in the near future). I have familiarised myself with it’s ins-and-outs to help ensure I use it to it’s full potential without being overkill, and it has sped up my HTML build time immensely.

One issue I’ve come across before is finding harmony between ASP.Net MVC’s validation and Bootstrap’s validation classes.

Out of the box when you use Html.ValidationMessageFor() to output a validation (with none of Microsoft’s validation classes set up), this is what I end up with:

form-vanilla-validation

Behind the scenes, the Microsoft validation has put an input-validation-error class on the text boxes that failed validation, and the validation message has some classes that can be styled:

Bootstrap’s method of validation styling is based on the parent’s class (the “form group”), instead of the element itself, thus allowing all children (e.g. labels and text boxes) to have a specific style:

It’s not difficult to apply the Bootstrap validation classes when model errors exist using a little JavaScript, but I decided to look for a nice NuGet package to do this for me, and I found one – jquery.validate.unobtrusive.bootstrap by Sandro Caseiro.  Simply install it via the NuGet Package Manager Console:

PM> Install-Package jquery.validate.unobtrusive.bootstrap

I use the bundling in the Microsoft.AspNet.Web.Optimization package, so rather than including the JavaScript library file raw in my view, I already have a validate bundle that will include it since this library has followed the naming convention, being jquery.validate.unobtrusive.bootstrap.js, so I don’t even need to update the BundleConfig.cs file:

This bundle was already being included in my page using the following:

Unfortunately this didn’t work! The jquery.validate.unobtrusive.bootstrap.js was being included, but when I look at the source, it’s being included BEFORE the jquery.validate.unobtrusive.js file:

The problem is that out of the box, the bundling library orders the packages included in the bundle alphabetically when using a wildcard *.

I saw a nice solution to this on someone’s the jquery.validate.unobtrusive.bootstrap GitHub issues page, it involves creating a custom orderer for the bundle:

Step 1: Create a new orderer class (I placed it within the BundleConfig class to keep it local):

Step 2: Update the bundle creation code to use this orderer:

The result is that your scripts will be output in order of the “dots” – a kind of heirarchy assumed based on the file naming convention, which works in this particular situation, at least (and it would be great if it worked in general, signifying a naming convention for JavaScript files):

And the result is a lovely looking form, utilising Bootstrap validation styling:

form-bootstrap-validation

Job done!

You may also like
Mocking users in ASP.NET MVC 5
Screenshot 2016-06-19 18.00.30
Getting Ghost Running on Bash on Windows
Setting directory permissions with Octopus Deploy