CODEWITHSUNDEEP
jqueryvalidationjquery-validatejquery-ui-datepicker
Ian Bishop
Ian Bishop

Reputation: 5205

Date validator on DatePicker trigger false negatives in IE7/IE8

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

Upvotes: 8

Views: 8395

Answers (5)

escapisam
escapisam

Reputation: 1417

In my case the class="date" attribute (not type="date") on the input field was causing validator to automatically add date validation to the field, which triggered the false negative in IE8. So I changed the class to 'date-select', then used the dateISO rule as in Andrew Whitaker's answer.

Upvotes: 0

justian17
justian17

Reputation: 565

I had a problem in my own code, where the date format was the same as described above and the form in the JSP (with a little assistance from Spring's form tags) looked like this: 

<fmt:formatDate pattern="yyyy-MM-dd" value="${user.dateOfBirth}" var="dob"/>
<form:input id="date-of-birth" type="date" path="dateOfBirth" value="${dob}"/>

The problem was the the date field is optional (required=false in JQuery validation rules), but it used DatePicker, and was thus validated automatically when it was filled. The problem was that on all browsers, and on IE9 (and up) it validated correctly, but on IE8, it caused an "invalid date" validation stop.

I played with the jquery validation rules, I tried using dateISO (though I am by no means saying that this solution will not work for some), to no avail.

Turns out that in my case, all I had to do was remove the attribute 'type="date"'. Now the date validates properly, and remains an optional field.

Upvotes: 0

Andrew Smith
Andrew Smith

Reputation: 11

Send the date how you need it formatted to a hidden field in your form using altField and altFormat, this fixed my NaN errors. 

$("#selectorDate").datepicker({
    dateFormat: 'mm/dd/yy',
    altField: "#another_field_date",
    altFormat: "yy-mm-dd"
});

Upvotes: 1

Manoj Yadav
Manoj Yadav

Reputation: 6612

Example to overcome IE NaN

var startDate   = "1987-11-14";
startDate       = startDate.split("-");
startDate       = new Date(startDate[0], + startDate[1], startDate[2]);
alert(startDate);

Upvotes: 3

Andrew Whitaker
Andrew Whitaker

Reputation: 126082

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/

Upvotes: 13

Related Questions