Date validator on DatePicker trigger false negatives in IE7/IE8

Question

I have some basic validation on a form which includes two jQuery UI DatePickers. The format of the date is yy-mm-dd. There is a required and date validation on both DatePickers.

These work as expected in Chrome & FF, but trigger false negatives (valid input is said to be invalid) in IE7/IE8.

Date picker setup:

$('.datepicker').datepicker({
    dateFormat: 'yy-mm-dd'
});

This is unrelated but I figured I would include, just in case:

$.validator.addMethod("endDate", function(value, element) {
    var startDate = $('#startDate').val();
    return Date.parse(startDate) <= Date.parse(value);
});

The actual validation:

$('#ExampleForm').validate({
    rules: {    
        StartDate: {
            required: true,
            date: true
        },
        EndDate: {
            required: true,
            date: true,
            endDate: true
        }
    },
    messages: {
        StartDate: {
            required: "Start Date required",
            date: "Invalid date. Must be formatted yyyy-mm-dd"
        },
        EndDate: {
            required: "End Date required",
            date: "Invalid date. Must be formatted yyyy-mm-dd",
            endDate: "Start date must occur before end date."
        }
    },
    errorPlacement: function(error, element) {
        error.appendTo(element.parent().next());
    },
    submitHandle: function(form) {
        form.submit();
    }
});

In IE7/IE8, valid input (just picking a date) with both DatePickers will result in the date error ("Invalid date. Must be formatted yyyy-mm-dd"). This does not occur in other browsers.

It also doesn't produce any Javascript errors.

Thanks in advance,

Ian

Answer 1

I think you're looking for the dateISO option:

$('form').validate({
    rules: {
        StartDate: {
            required: true,
            dateISO: true
        },
        EndDate: {
            required: true,
            dateISO: true
        }
    },
    messages: {
        StartDate: {
            required: "Start Date required",
            dateISO: "Invalid date. Must be formatted yyyy-mm-dd"
        },
        EndDate: {
            required: "End Date required",
            dateISO: "Invalid date. Must be formatted yyyy-mm-dd"
        }
    },
    submitHandler: function(form) {
        form.submit();
    }
});

IE won't parse dates in yyyy-mm-dd format, which is why using regular date fails in IE. I believe jQuery validate just uses Date.parse or new Date(dateString) to check for validity. To check this, try doing new Date("1987-11-14") and alerting the value in IE and FF. You'll get NaN in IE and a date object in FF.

Here's a working example: http://jsfiddle.net/andrewwhitaker/QqSrJ/2/