How To Enable Client Side JQuery Validation in MVC4

Image may be NSFW.
Clik here to view.

There are (at least) 2 ways to implement validation in MVC4.  One is server side and the other is client-side.  The benefit of client-side validation is that it’s quicker and doesn’t require a call-back.  The downside is you can do less validation.  Not that there isn’t a plethora of validation options available, but you’re limited to those options as opposed to (for example) you want to compare a product to another set of products (not currently on the page) that requires a database query to obtain and you want to compare the typed in price against the query.  I’m not sure why you’d want to do that… it’s just an example and it was the best I could come up with while writing this post.  So…

The Problem:  I needed to enable validation on all my forms for a website.  But where do I begin?

The Solution:  First, let’s assume that you’re using MVC 4 (since that is the name of this article).  Next, let’s assume that you’re passing Models from your controller to your view.  With me so far?  Good.

Step 1:  Decorate the required parameters of your model.  I’m not going to go into all the different types of validation MVC offers (Required, Maximum Characters, Regular Expressions, etc…).  For the sake of this example, I’m going to assume we only want to make each field REQUIRED.  We need to decorate each required parameter of our Model as “Required” and assign an Error Message (see the example image below):

Image may be NSFW.
Clik here to view.

Notice, I have 4 attributes of the MODELCREATEASSET class decorated as required?  Good.  Moving on.

Step 2:  We need to add the Validation Error Message to the View.  This is pretty straight forward as seen here:

Image may be NSFW.
Clik here to view.

What you’re looking for is the @Html.ValidationMessageFor(x => x.Model) under each @Html.EditorFor(x => x.Model).  Yes, I know there are tables in there.  It’s not my fault.  I only recently found out about Bootstrap.

Step 3:  We need to assign the “cancel” class to the Cancel button of the form.  Most forms have a submit/ok button and a cancel button.  I have a cancel button in each of my forms as my users complain if one isn’t there.  If you don’t add the “cancel” class to the button, it triggers validation whenever you click either “Submit” or “Cancel”.  Which can be downright irritating if you’re the user trying to cancel out of a form, but forced to enter garbage data into required fields just to go back.  And yes, adding the cancel class to the button is exactly like what I just described.

Image may be NSFW.
Clik here to view.

I haven’t actually created a “cancel” class in my CSS file.  I just referenced it here.

Step 4:  We need to add the proper JQuery files to your project.  This is what took me so damn long to figure out.  There are real inconsistency issues between different versions of JQuery and versions that have/had bugs in them.  The safest way to be certain you load the correct versions of JQuery.Validation and JQuery.Unobtrusive.Validation is to add them using NuGet in Visual Studio.  I have Visual Studio 2013, so your screen may look a bit different from mine, but here are images of the packages that need to be added:

Image may be NSFW.
Clik here to view.

Add both of these to your project.  Lastly, you need to reference them.  You can add them to your bundles or you can add them to the head of your Layout page like so:

Image may be NSFW.
Clik here to view.

That’s it.  If you’ve done all of that, you should have a working set of client-side JQuery form validators running.  If you’ve run into a problem, it’s most likely a JQuery file version issue (or I’ve forgotten a step in my description above).  Try using all of the file versions I have:

• JQuery: 1.9.1
• JQuery Validate: 1.11.1
• JQuery Unobtrusive: Grr… this one doesn’t have a version embedded into the file.  Just make sure you grab the same file from NuGet that I did.

Good luck validating your users input!

Capt. Rochefort (The number of business minded people who think “It’s just software” is flabbergasting)

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.