To make it easier for people to use the approach detailed in this post I have created a repository for
jquery.validate.globalize.js on GitHub here.
This is also available as a nuget package here.
To see a good demo take a look here.
jQuery Global is dead... Long live Globalize!
However, there's one tweak I would make to Scotts suggestions and that's to use Globalize in place of the jQuery Global plugin. The jQuery Global plugin has now effectively been reborn as Globalize (with no dependancy on jQuery). As far as I can tell jQuery Global is now disappearing from the web - certainly the link in Scotts post is dead now at least. I've
ripped off been inspired by the "Globalized jQuery Unobtrusive Validation" section of Scotts article and made
And for what it's worth
The above script does 2 things. Firstly it monkey patches jquery.validate.js to make use of Globalize.js number and date parsing in place of the defaults. Secondly it initialises Globalize to relevant current culture driven by the
html lang property. So if the html tag looked like this:
<html lang="de-DE"> ... </html>
Then Globalize would be initialised with the "de-DE" culture assuming that culture was available and had been served up to the client. (By the way, the Globalize initialisation logic has only been placed in the code above to demonstrate that Globalize needs to be initialised to the culture. It's more likely that this initialisation step would sit elsewhere in a "proper" app.)
html lang getting set?
In Scott's article he created a
MetaAcceptLanguage helper to generate a META tag like this:
<meta name="accept-language" content="en-GB" /> which he used to drive Globalizes specified culture.
Rather than generating a meta tag I've chosen to use the
lang attribute of the
html tag to specify the culture. I've chosen to do this as it's more in line with the W3C spec. But it should be noted this is just a different way of achieving exactly the same end.
So how's it getting set? Well, it's no great shakes; in my
_Layout.cshtml file my html tag looks like this:
And in my
web.config I have following setting set:
<configuration> <system.web> <globalization culture="auto" uiCulture="auto" /> <!--- Other stuff.... --> </system.web> </configuration>
With both of these set this means I get
<html lang="de-DE"> or
<html lang="en-GB"> etc. depending on a users culture.
Serving up the right Globalize culture files
In order that I send the correct Globalize culture to the client I've come up with this static class which provides the user with the relevant culture URL (falling back to the en-GB culture if it can't find one based your culture):
Putting it all together
To make use of all of this together you'll need to have the
html lang attribute set as described earlier and some scripts output in your layout page like this:
Which will render something like this:
This will load up jQuery, Globalize, your Globalize culture, jQuery Validate, jQuery Validates unobtrusive extensions (which you don't need if you're not using them) and the jQuery Validate Globalize script which will set up culture aware validation.
Finally and just to re-iterate, it's highly worthwhile to give Scott Hanselman's original article a look. Most all the ideas in here were taken wholesale from him!