jQuery Validation Globalization with ASP.NET MVC 3

ASP.NET MVC 3 has a great feature, which is client validation using jQuery plug-in’s jQuery validations and using a Microsoft script the validation is made without the need of any other special code. You just have to use the attributes from System.ComponentModel.DataAnnotations namespace. For those who don’t know, to use this validation you just need to add the following script references (which are included in the default template when a new Asp.Net Mvc 3 gets created):

<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Pretty simple actually! But there is an issue, this script is not globalized. So, let’s say you have an attribute inside your class of the DateTime type and you’d like to validate it, for instance, I had a class which among other things had a DateTime. Just to make things simples, it was something like this:

public class Person
{
    public string Name { get; set; }
    public string Sex { get; set; }
    public string Rg { get; set; }

    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    [DataType(DataType.Date)]
    public DateTime? BirthDate { get; set; }
}

Having a filled in form with the date 16/09/1980, for instance, automatically it was detected as an invalid date since the expected is a date using the pattern mm/dd/yyyy, but of course, here in Brazil the pattern is different, it is dd/mm/yyyy.

So how can I fix it?

First of all, I have to use the jQuery’s plug-in Globalize. I just have to add references to two scripts.

<script type="text/javascript" src="@Url.Content("~/Scripts/globalize.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/cultures/globalize.culture.pt-BR.js")"></script>

After that, all it has to be done is set the desired culture and write a small function to parse the date using the Globalize parseDate function:

Globalize.culture("pt-BR");
$.validator.methods.date = function (value, element) {
	return this.optional(element) || Globalize.parseDate(value);
};

It couldn’t be simpler!