Localization validation in MVC

Edit 10\15\2014: I created a new version of this blogpost. It is called MVC localization validation.

Last week I was working on a bug for my website SeeTings. The bug was the validation of a DateTime not working in Firefox and Chrome. In Internet Explorer (even version 9) was working correct.

After hours searching and hundreds of form posts further, I finally found the solution. I thought the problem was in implementing the jQuery UI Date picker with the Dutch Format of a date (dd-MM-yyyy) in it but that wasn’t true.

The problem was the client validation of the jQuery Validation plugin. ASP .NET MVC 3 and 4 are shipped with an installed version of jQuery. And the internet template (the one that I was using) creates a login and register process.

To test the bug, I created a new project and added a DateTime field called Birthday to the register login form. I deleted all other fields except the UserName field because then I could test if the Required validation still worked if I might fined a solution for the validation problem.

After long searching, I saw this post http://stackoverflow.com/a/511670 on Stackoverflow. There was another script file called “additional-methods.js” that I didn’t heard of. After long searching, I found the official website of jQuery validation http://bassistance.de/jquery-plugins/jquery-plugin-validation/ and saw the CDN of all the jQuery instances.

It seemed not necessary to link the additional-methods.js file because that would only add extra validation like credit card or url TLD and email TLD etc. checking.  I found out that jQuery validation had multiple localization files. One for the messages and one for one other thing and that was my problem, the date validation.

When you go to the CDN of Microsoft, you will see in version 1.6 (current version is 1.9) a long list of localization files.

The files ending with messages_xxx.js are the error messages localized. The files ending with methods_xx.js (like for me methods_nl.js) are the localized versions of some script. In this case only the date.

So reference on your page where you need to do the validation, the standard validation scripts of jQuery and after that you need to reference you localization file. Only do this if the browser is that language. So I only reference the script file if I know that the browser is Dutch. You can find the current language settings of the browser with JavaScript as well. You can change the url of the CDN from 1.6 to 1.9 and it will still work. Why the files are not listed on the 1.9 page, I don’t know.

After completing this above, you can after that implementing the jQuery Datepicker. Don’t forget that the Datepicker of jQuery UI also needs a localization reference file. See the last part of the documentation on this page http://jqueryui.com/demos/datepicker/. Just reference the file and everything is working.

Good luck and hopefully you guys aren’t that long busy figuring out why the validation isn’t working.