Question

我对包含两个jQuery UI DatePickers的表单进行了一些基本验证。日期格式为yy-mm-dd。两个DatePickers都有必需的和日期验证。

这些工作正如预期的Chrome＆amp; FF，但在IE7 / IE8中触发漏报（有效输入被认为无效）。

日期选择器设置：

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

这是无关的，但我想我会包括，以防万一：

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

实际验证：

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

在IE7 / IE8中，使用两个DatePickers的有效输入（仅选择日期）将导致日期错误（“无效日期。必须格式化为yyyy-mm-dd”）。这在其他浏览器中不会发生。

它也不会产生任何Javascript错误。

提前致谢，

伊恩

Answer 1

我认为您正在寻找dateISO选项：

$('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不会以yyyy-mm-dd格式解析日期，这就是为什么在IE中使用常规date失败的原因。我相信jQuery验证只使用Date.parse或new Date(dateString)来检查有效性。要检查这一点，请尝试执行new Date("1987-11-14")并警告IE和FF中的值。您将在IE中获得NaN，在FF中获得日期对象。

以下是一个有效的例子：http://jsfiddle.net/andrewwhitaker/QqSrJ/2/

Answer 2

克服IE NaN的示例

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

Answer 3

使用altField和altFormat将您需要的日期格式化为表单中的隐藏字段，这样可以解决我的NaN错误。

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

Answer 4

我在自己的代码中遇到了问题，其中日期格式与上面描述的相同，JSP中的表单（在Spring的表单标签的帮助下）看起来像这样：

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

问题是日期字段是可选的（JQuery验证规则中的required = false），但它使用了DatePicker，因此在填充时自动验证。问题是在所有浏览器上，在IE9（及以上）上验证正确，但在IE8上，它导致“无效日期”验证停止。

我玩了jquery验证规则，我尝试使用dateISO（虽然我并不是说这个解决方案对某些人不起作用），但无济于事。

事实证明，在我的情况下，我所要做的就是删除属性'type =“date”'。现在日期正确验证，并保持可选字段。

Answer 5

在我的例子中，输入字段上的class =“date”属性（不是type =“date”）导致验证器自动将日期验证添加到字段，这在IE8中触发了错误否定。所以我将课程改为'date-select'，然后使用dateISO规则，如Andrew Whitaker的答案。

DatePicker上的日期验证程序在IE7 / IE8中触发错误否定

5 个答案: