Jquery 验证日期范围失败

Question

我有一个带有 Web 表单的 HTML 页面。除此之外，它还包括以下表单字段:

• 标题 - 文本框
• 源名称 - 文本框
• 网址 - 文本框
• 全文 - 文本框
• PublicationDate - 使用 jQuery 日期选择器 UI 的文本框
• StartDate - 使用 jQuery 日期选择器 UI 的文本框
• EndDate - 使用 jQuery 日期选择器 UI 的文本框

我正在尝试实现 jQuery 验证器多个字段 sample :

jQuery(document).ready(function() {
// a custom method for validating the date range
jQuery.validator.addMethod("dateRange", function() {
    var date1 = new Date(jQuery("#StartDate").val());
    var date2 = new Date(jQuery("#EndDate").val());
    return (date1 < date2);
}, "Please check your dates. The start date must be before the end date.");

// a new class rule to group all three methods
jQuery.validator.addClassRules({
    requiredDateRange: { required: true, date: true, dateRange: true }
});

// overwrite default messages
jQuery.extend(jQuery.validator.messages, {
    required: "These fields are required",
    date: "Please specify valid dates"
});

jQuery("#mainForm").validate({ 
    submitHandler: function() {
        alert("Valid date range.")
    },
    groups: {
        dateRange: "StartDate EndDate"
    },
    rules: {
        "Title": "required",
        "SourceName": "required",
        "Url": "required",
        "FullText": "required",
        "PublicationDate": "required",
        "CategoryCount": {required: true, min: 1}
    },
    messages: {
        "Title": "Please type in a headline.",
        "SourceName": "Please select a source by typing a few letters and selecting from the choices that pop up.",
        "Url": "Please paste or type in a web page link.",
        "FullText": "Please paste in the full text of the source report.",
        "PublicationDate": "Please provide a date of publication.",
        "CategoryCount": "Please specify at least one category."
    }
});

// Capture changes to the list of selected categories by 
// storing the count in a hidden field.
jQuery(".categoryCheckbox").click(function() {
        var count = new Number(jQuery("#CategoryCount").val());
        if (jQuery(this).attr("checked") == true) {
            count = count + 1;
        } else {
            count = count - 1;
        }

        if (count < 0) {
            count = 0
        };

        jQuery("#CategoryCount").val(count);
});

});

它验证除日期范围之外的所有内容。我尝试更自定义地执行此操作，但在 return 语句之前显式创建 Date 对象(在演示中，全部都在一行上)，但这没有任何好处。有人有使其实际发挥作用的经验吗？

编辑: 我添加了一行以在调用 dateRange 方法时弹出警报消息，但它从未显示。我想知道验证器的组和规则部分是否不能一起工作。

Answer 1

您是否检查过 date1 和 date2 的值是否确实已设置？你打电话吗

$("#StartDate").datepicker();
$("#EndDate").datepicker();

实际创建日期选择器？

html 怎么样？您指向的示例设置了编辑框的 ID 和名称(我不知道验证器是否使用 ID 或名称，但它可能来自该示例)。