Multi-Culture Unobtrusive Validation Of Dates

Question

I have an ASP.NET MVC project, and I'm using jquery.validate.unobtrusive to perform client side validation of values. However, I'm having issues validating dates. The system needs to support multiple cultures, however the majority of current users are from the UK, so use the UK date format.

By default, this fails validation even when a valid date is entered, stating the Date field must be a valid date.

I found the following code online to change the date formatting:

$.culture = Globalize.culture("en-GB");
    $.validator.methods.date = function (value, element) {
        //This is not ideal but Chrome passes dates through in ISO1901 format regardless of locale 
        //and despite displaying in the specified format.

        return this.optional(element)
            || Globalize.parseDate(value, "@ViewBag.DateFormat", "en-GB")
            || Globalize.parseDate(value, "yyyy-mm-dd");
    };

However this no longer seems to be valid - I get a "Globalize.culture is not a function" error. However, If I remove that line, I get no validation at all on any field.

It seems that you need to download jquery.globalize to use that code, however this has now been pulled from Github and merged into newer versions of JQuery (which I cannot use due to conflicts with other libraries).

Using the new Globalize also does not appear to work.

Is there an easier way of performing Date validation that will work with any culture? Or is there a link somewhere to an older copy of Globalize that will work as suggested?

I have used MomentJS for this sort of thing and love it. – Khan Jun 09 '15 at 15:44 — Khan, Jun 09 '15 at 15:44

score 0 · Accepted Answer · edited May 23 '17 at 12:09

Here are a few similar questions: HTML5 change datetime format

jquery ui datepicker and mvc view model type datetime

The answers seems to suggest 3 approaches:

1) Use jquery globalize to override unobtrusive jquery

2) Add the following script (which is for datepicker control):

$.validator.addMethod('date', function (value, element) {
  if (this.optional(element)) {
    return true;
  }
  var valid = true;
  try {
    $.datepicker.parseDate('dd/mm/yy', value);
  }
  catch (err) {
    valid = false;
  }
  return valid;
});
$('#dt1').datepicker({ dateFormat: 'dd/mm/yy' });

3) Use hidden inputs.

Unfortunately in my case none of the solution worked and I had to convert the model field from datetime to string as it was readonly.

Multi-Culture Unobtrusive Validation Of Dates

1 Answers1