Unobtrusive Validation on en-GB Dates

Question

I am designing a data input form using asp.net MVC4 which has an input of type date.

Using the unobtrusive jQuery library in chrome and jQueryUI datepicker I was still getting an error (The field news_date must be a date.), after selecting a correct date format, using the datepicker (i.e. 14/02/2013) and submitting the form.

Some searching suggested I should use the jQuery.globilization library. So after reading the documentation I added a reference to the following script.

$(document).ready(function () {
    $.culture = Globalize.culture("en-GB");
    $.validator.methods.date = function (value, element) {
        return this.optional(element) || Globalize.parseDate(value, "dd/MM/yyyy", "en-GB");
    }
});

However I am still getting the error

If I debug the the above code in chrome i can see that the value of "value) is "2014-02-14".

Below is html which gets rendered.

<div class="editor-field">

<input class="text-box single-line datepicker hasDatepicker input-validation-error" data-val="true" data-val-date="The field news_date must be a date." id="news_date" name="news_date" type="date" value="">
<script type="text/javascript">
    $(function () {
        $(".datepicker").datepicker({ dateFormat: "dd/MM/yyyy" });
    });
    </script>
            <span class="field-validation-error" data-valmsg-for="news_date" data-valmsg-replace="true"><span for="news_date" class="" style="">The field news_date must be a date.</span></span>
        </div>

UPDATE: incidentally if i change my validator method to hardcode. i.e.

$.validator.methods.date = function (value, element) {
    return this.optional(element) || Globalize.parseDate("14/03/2014", "dd/MM/yyyy", "en-GB")
}

It works. So it definately appears to be the format that the date is being stored on the page prior to POST or submit validation which is the issue.

UPDATE after selecting the date if i run $('#news_date').val() in the chrome console, i get "2014-02-14" and i can debug my script and see the value being passed it the validator method it is this value and thus it doesnt match the british date format thus returning a null, rather than a value which would pass validation. So is my problem with how the datepicker is storing the date after selection?

Has anyone found a workaround for this in Chrome?

Cowry

Answer 1

This workaround appears to handle chrome and ie etc. In chrome I cannot type in an incorrect date so the date picker will give me a valid date and when it passes it to the validator function it will be in the yyyy-mm-dd format. i.e lets me type straight into the input or use the picker, typing in an invalid date i.e. 2/30/2013 (invalid in en-GB culture) it correctly invalidates it and prevents further progress. If no better suggestions I think ill go with this as the best workable answer

$(document).ready(function () {
$.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, "dd/mm/yyyy", "en-GB")
        || Globalize.parseDate(value, "yyyy-mm-dd");
}});

Cowry

Thanks for this, been banging my head against a wall all day and this worked a charm. Incidentally I couldn't get it to work with latest version of Globalize.js (v1.1.0) since it's all changed to CLDR. Works fine with an older version v0.1.1 though. – Conduce

Answer 2

Can i suggest you another work around, Put this in your web.config to avoid issues with differenet culture settings.

<globalization requestEncoding="utf-8" responseEncoding="utf-8" culture="en-GB" uiCulture="en-GB"/>

And in Jquery datepicker this would be enough,

 $(function () {
        $(".datepicker").datepicker({ dateFormat: "dd/MM/yyyy" });
 });

Stirrup

I already have this, with the exception of the two encoding attributes. Changed this and i still get the same. The date picker allows me to pick a date and it looks GB format in the display, but when it passes through to the validator its passing though in the format yyyy-MM-dd. – Cowry

can you try decorating your controller with [HttpPost] attribute. – Stirrup

We had a issue like this - weblogs.asp.net/melvynharbour/archive/2008/11/21/… – Stirrup

ssilas777 not sure that suggestion would help as this is all client side validation, its not even passed a GET or POST at this point. I verified using Fiddler. – Cowry

Have you tried that, unobtrusive should have ajax in background? – Stirrup

ssilas777, my controller's form submit method is decorated with [HttpPost] and this does work in ie and ffx its just chrome where it doesnt. I also cannot see any traffic in fiddler to the controller via ajax. – Cowry

Answer 3

$(function () {
        $(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
 });

Vesting