jquery validation allows numbers for "data-val-date"/MVC

Question

I've have client side validation enabled with jquery.validate.js and jquery.unobtrusive.ajax.js both referenced on my page. I'm using @Html.TextBoxFor() to create the inputs in a form.

Client side validation is working correctly except for the dates.

If I try to enter a letter, I get a client side error, which is great.

If I enter a blatantly invalid date like 02/77/2018, I get a client side error just as expected/desired, like any other type that doesn't pass validation.

However if I enter just an integer in for the date (e.g. 111), it passes validation. Does anyone know why?

Luckily it doesn't pass my server side validation in the controller, but all my other validation is done client side and i'd like to keep things consistent. I could write some custom code to validate the format of the date, but it seems like there has to be an easier way to make sure the input is in MM/dd/yyyy or MM-dd-yyyy format.

To reproduce the issue, refer this DotNetFiddle

1. Enter A in the textbox and tab out - a error message is shown
2. Enter 111 in the textbox and tab out - the error message disappears
3. Enter 11112018 in the textbox and tab out - the error message appears again
4. Enter 111 again and the error message disappears
5. Click save - the form is submitted and the server side error message is displayed

Answer 1

The jquery.validate.js plugin validates dates by calling new Date(value);

The actual function is

// http://docs.jquery.com/Plugins/Validation/Methods/date
date: function( value, element ) {
    return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString());
},

Whether this returns true also depends on the browser you are using.

For example, in Chrome

new Date('aaa') // returns Invalid Date
new Date('111') // return Thu Jan 01 0111 00:00:00 GMT+1030 (Cen. Australia Daylight Time)
new Date('11112018') // returns Invalid Date

in FireFox/Edge

new Date('aaa') // returns Invalid Date
new Date('111') // returns Invalid Date
new Date('11112018') // returns Invalid Date

Even more confusing is that if you were to enter new Date('02/77/2018') in Chrome, you get Invalid Date, but in FireFox and Edge it will return a date (but not the date you entered)

As a side note, I raised this issue on GitHub, but it was rejected. Note the comment regarding date will be deprecated in favor of dateISO, but this has not been incorporated into jquery.validate.unobtrusive.js.

This answer includes a script that you can use to give correct client side validation for all browsers.

Answer 2

You can use regular expression to check the input against your regex.
This is just a simple regex, but you can build a complex one if you want!
Sky is the limit

public class SampleViewModel
{
    [RegularExpression(@"^.*\d{1,2}\/\d{1,2}\/\d{4}$", ErrorMessage = "Only mm/dd/yyyy is allowed!")]
    public DateTime Date { get; set; }

}