Jquery dd/MM/yyyy date format validation

Question

I using default ASP.NET MVC 4 validation bundle in my application. In view I have a date field in the format of "dd/MM/yyyy" and jquery validation failed to validate the format. Then I added the below code to override the default behavior.

$(function () {
        $.validator.methods.date = function (value, element) {
            Globalize.culture("en-GB");
            // 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;
        }
    });

Then the date validation issue was resolved, and now my application does not fire client side validation but the server side validation. what could be the reason for this behavior?

Is it definitely not firing client-side validation, or is it producing a javascript error as part of the validation, which in turns fails to mark the POST as invalid, so goes ahead and calls the server? — Snixtor, Dec 31 '13 at 06:32

score 12 · Answer 1 · edited May 23 '17 at 12:33

12

Found a simpler solution for me on see : Clientside validation fails for date format dd/mm/yyyy in jQuery Validate

Like it because I don't need new third party scripts or any extra plugins

Basically overwrite the validation method like this:

$(document).ready(function () {
    $.validator.methods.date = function(value, element) {
        return this.optional(element) || parseDate(value, "dd-MM-yyyy") !== null;
    };
});

edited May 23 '17 at 12:33

Community

1
1

answered Feb 10 '14 at 11:38

Dai Bok

3,451
2
53
70

1

Not sure where parseDate comes from, but you can use date.js and this Date.parseExact(value, "d/M/yyyy") in it's place. But +1 for getting me on the right path – Richard Housham Jun 22 '16 at 14:23
it used to be with jQuery.datepicker.parseDate – Dai Bok Aug 03 '16 at 13:58

score 6 · Answer 2 · answered Jul 31 '14 at 20:28

6

You can use dateITA from additional methods.

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.js

$("#myform").validate({
    rules: {
        dateITA: true
    }
})

I hope it works.

answered Jul 31 '14 at 20:28

jcamelis

1,289
1
9
10

chamara · Accepted Answer · 2014-01-03T14:31:35.877

It was missing the globalize.js file. i modified the code as below and now working fine.

download the files from https://github.com/jquery/globalize

include references to relevant .js files (You can also install it with NuGet packages as well, which is the option I have used.)

<script src="~/Scripts/globalize/globalize.js"></script>
<script src="~/Scripts/globalize/cultures/globalize.culture.en-GB.js"></script>

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

score 1 · Answer 4 · answered Jun 07 '14 at 08:53

1

Thanks Dai. Had to use something similar from date.js library. See below:

$.validator.methods.date = function(value, element) { 
  return this.optional(element) || Date.parseExact(value, "dd-MM-yyyy"); 
};

answered Jun 07 '14 at 08:53

Kwex

3,992
1
35
28

score 1 · Answer 5 · answered Sep 03 '14 at 06:37

You can use following code to validate :

    jQuery.validator.addMethod("validdate", function(value, element) {
       return this.optional(element) ||  /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(value);
    }, "Please enter valid date.");

Kindly use $ or jQuery as per your code. Here you just required to add rule in jQuery code and let use validdate to your costume rule.

score 0 · Answer 6 · answered Nov 12 '16 at 20:56

I prefer to format in MM/dd/yyyy and use the same validation of jQuery. This works perfect if you overrite the jQuery date validation.

$.validator.methods.date = function (value, element) {
    value = dateValue(value);
    return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString());;
}

function dateValue(value) {
    var date = value.split("/");
    return date[2] + "/" + date[1] + "/" + date[0]
}

Jquery dd/MM/yyyy date format validation

6 Answers6

Linked