jQuery date validation - format and range

Question

I have a requirement where I will have 2 date fields ( to , from ) and needs to validate them:

• whether they are mm/dd/yyyy format
• both the dates are in particular range
• as the name suggests to should always be greater than from
• both fields become mandatory as soon as i enter any one of these

what will be the best way to implement the same, am using jquery validation api

Note : I did read about format validation on some of the links like jQuery Date Validation (YYYY-MM-DD) but these doesnt ensure that its a valid date I may end up entering something like 02/31/2999

i tried

jQuery.validator.addMethod("DateFormat", function(value, element) {
    var date_regex = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/ ;
    var values = value.split("/");
    return this.optional(element) || (value.test(date_regex) && (new Date(values[2], values[0], values[1])));
});

Answer 1

We have handled pretty much exactly this problem. What you need to do is create a series of validation rules. First, you give the dates some sort of appropriate class attributes - "fromDate" and "toDate", say.

• One that uses a regular expression to make sure that they're in the right format
• one that date-converts that using the javascript Date object, and makes sure that they're in the right range.
• one for the from date, that knows how to find the to date (generally handled by going up a level or two, and then running .find('input.toDate')) or similar on it, and compares them.
• Another, reversed, for the to date.
• One that returns true if both are empty, but false if one is empty and the other full

Then you assign the appropriate rules to the appropriate classes with jQuery.validate.addClassRules() .

Put all of that code before you set up your validator on the form in question, and it should work just fine. Syntax is left as an exercise for the reader.

Answer 2

added followign validation methods

// jquery validation method to validate date format
jQuery.validator.addMethod("DateFormat", function(value, element) {
    var date_regex = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/ ;
    var comp = value.split('/');
    var m = parseInt(comp[0], 10);
    var d = parseInt(comp[1], 10);
    var y = parseInt(comp[2], 10);
    var date = new Date(y,m,d);
    return this.optional(element) || (date_regex.test(value) && date.getFullYear() == y && date.getMonth() == m && date.getDate() == d);
});
//jquery validation method to validate date range
jQuery.validator.addMethod("DateToFrom", function(value, element, arg0, arg1) {
    var comp = value.split('/');
    var m = parseInt(comp[0], 10);
    var d = parseInt(comp[1], 10);
    var y = parseInt(comp[2], 10);
    var currentEltdate = new Date(y,m,d);

    comp = $("#"+arg0).val().split('/');
    m = parseInt(comp[0], 10);
    d = parseInt(comp[1], 10);
    y = parseInt(comp[2], 10);
    var otherEltDate = new Date(y,m,d);

    var lowerDate, upperDate;
    if(arg1 == true){//current element should be lower date
        lowerDate = currentEltdate;
        upperDate = otherEltDate;
    }else{
        lowerDate = otherEltDate;
        upperDate = currentEltdate;
    }
    return this.optional(element) || (lowerDate <= upperDate);
});
// jquery validation method to validate date range
jQuery.validator.addMethod("DateRange", function(value, element, arg0, arg1) {
    var comp = arg0.split('/');
    var m = parseInt(comp[0], 10);
    var d = parseInt(comp[1], 10);
    var y = parseInt(comp[2], 10);
    var startDate = new Date(y,m,d);

    comp = arg1.split('/');
    m = parseInt(comp[0], 10);
    d = parseInt(comp[1], 10);
    y = parseInt(comp[2], 10);
    var endDate = new Date(y,m,d);

    comp = value.split('/');
    m = parseInt(comp[0], 10);
    d = parseInt(comp[1], 10);
    y = parseInt(comp[2], 10);
    var date = new Date(y,m,d);

    return this.optional(element) || ((startDate <= date) && (date <= endDate));
});