MVC 4 how to validate a non-US date with client validation?

Question

I have a situation where I am having trouble with the client side validation of a datetime field. When I try to submit it keeps telling me the date is invalid (27/7/2013). But if I turn the date into US format it works (07/27/2013).

My view model is as follows,

[DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime? AuditDate { get; set; }

Index.html

 @Html.TextBoxFor(m => m.AuditDate)

I have updated my web.config

<globalization culture="en-AU" uiCulture="en-AU" />

What have I missed out on?

Thanks

**[Hope you will find it useful](http://stackoverflow.com/questions/18142489/how-to-validate-date-in-clientside-using-fluentvalidation/18276353#18276353)** — Imad Alazani, Aug 31 '13 at 11:18
sorry I didn't find it useful, i am not using any fluent validators — user2206329, Aug 31 '13 at 13:24
Take a look at http://stackoverflow.com/questions/11272851/format-datetime-in-asp-net-mvc-4?rq=1, the accepted answer should solve the problem. — Abbas Amiri, Aug 31 '13 at 18:49
I tried that, that didn't work either. I have created a new MVC 4 project and added a datetime to the registration page. Still the same issue. Surely something like this should be easy to do yeah? Here is my project https://dl.dropboxusercontent.com/u/87611366/MvcApplication2.zip — user2206329, Sep 01 '13 at 01:41

score 27 · Accepted Answer · edited May 23 '17 at 11:54

Someone else sorted this for me, it was all to do with the client side Jquery validation. Thanks again asymptoticFault.. you rock.. MVC 4 date culture issue?

Here is the info from that link that I used...

The problem is the jQuery validation not accounting for the culture when parsing a date. If you turn off the client side validation the date is parsed just fine on the server that is aware of the culture.

The fix is to override the jQuery validation for date and include an additional jQuery globalization plugin. You can find the globalize plugin here. You can also easily download the plugin using the Nuget Package Manager as well. I just opened the package manager, selected the Online tab on the left and typed "globalize" into the search and it was the first result. Once you have it installed I included these two files:

globalize.js 
globalize.culture.en-AU.js

You can either include them directly using a script tag or place them in a bundle, perhaps with the other jQuery validation files.

Once you have those you will need to add the following script to override the jQuery validation for date:

<script type="text/javascript">
    $(function () {
        $.validator.methods.date = function (value, element) {
            Globalize.culture("en-AU");
            // you can alternatively pass the culture to parseDate instead of
            // setting the culture above, like so:
            // parseDate(value, null, "en-AU")
            return this.optional(element) || Globalize.parseDate(value) !== null;
        }
    });
</script>

Would be nice if you provided the gist of the answer here as well in case the link dies. — Kugel, Jan 14 '14 at 00:05
It worked ok, but when I downloaded Globalizejs with Nuget (https://www.nuget.org/packages/jquery-globalize/) the file "globalize.culture.en-AU.js" was not there, but is not necessary. It worked ok just with "globalize.js" — Daniel Silva, Dec 22 '16 at 14:58

score 10 · Answer 2 · answered Mar 08 '17 at 15:58

Client validation issues can occur because of MVC bug (even in MVC 5) in jquery.validate.unobtrusive.min.js which does not accept date/datetime format in any way. Unfortunately you have to solve it manually.

My finally working solution:

You have to include before:

@Scripts.Render("~/Scripts/jquery-3.1.1.js")
@Scripts.Render("~/Scripts/jquery.validate.min.js")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
@Scripts.Render("~/Scripts/moment.js")

You can install moment.js using:

Install-Package Moment.js

And then you can finally add fix for date format parser:

$(function () {
    $.validator.methods.date = function (value, element) {
        return this.optional(element) || moment(value, "DD.MM.YYYY", true).isValid();
    }
});

Thanks, feel free to use any date format you want (moment.js can handle everything i suppose). :) — lukyer, Jul 11 '17 at 13:45

score 4 · Answer 3 · answered Sep 01 '13 at 04:45

4

When using jQuery validation for dates, you will find out that it does not work well for dates using Chrome. This happens when you use a non-US locale.

The solution has presented at Fixing jQuery non-US Date Validation for Chrome

answered Sep 01 '13 at 04:45

Abbas Amiri

3,074
1
23
23

score -2 · Answer 4 · answered Aug 31 '13 at 11:00

-2

Try with this,

View

<div>
                @Html.LabelFor(m => m.DOB)
                @Html.TextBoxFor(m => m.DOB, new { @Formate = "dd/MM/yyyy" })
                @Html.ValidationMessageFor(m => m.DOB)

            </div>

Model

[DisplayName("Date Of Birth")][DataType(DataType.Date)]
public DateTime DOB { get; set; }

answered Aug 31 '13 at 11:00

Jaimin

7,964
2
25
32

same outcome.. doesn't work... surely it must be something not so complicated to change the culture – user2206329 Aug 31 '13 at 13:08
This doesn't address the error in the clientside validation, which is the problem – Chris F Carroll Nov 25 '15 at 10:42

MVC 4 how to validate a non-US date with client validation?

4 Answers4

Linked