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).

Answer 1

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; }

Answer 2

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>

Answer 3

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();
    }
});

Answer 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