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?

Markup

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? – Glossography

Answer 1

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

Markup

Answer 2

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

Upu

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 – Alphosis

it used to be with jQuery.datepicker.parseDate – Upu

Answer 3

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.

Onetoone

Answer 4

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

Eliaeliades

Answer 5

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.

Aerialist

Answer 6

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

Texture

Answer 7

function Search() {

    if (ValidateDates() == false) {
        ShowErrorMessage("Event date required")
        return;
    }
}

function ValidateDates() {

    var fromDate = $("#FromDate").val();
    var toDate = $("#ToDate").val();

    if (fromDate == "" | toDate == "") {
        return false;
    }
    else {
        return true;
    }
}

Sedillo

Thank you for your interest in contributing to the Stack Overflow community. This question already has a few answers—including a couple that have been validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation? – Albertinealbertite