Jquery 验证日期范围失败

Question

我有一个带有 Web 表单的 HTML 页面。除其他外，它包括以下表单字段：

• 标题 - 文本框
• SourceName - 文本框
• 网址 - 文本框
• 全文 - 文本框
• PublicationDate - 使用 jQuery 日期选择器 UI 的文本框
• StartDate - 使用 jQuery datepicker UI 的文本框
• EndDate - 使用 jQuery datepicker 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 还是名称，但它可能来自该示例）。

Answer 2

这有助于我确保所选日期不早于当前日期：

$.validator.addMethod("dateRange", function() {
    var today = new Date();
    var event_date = new Date( $('#event_date').val() );
    if( event_date >= today )
        return true;
    return false;
}, "Please specify a correct date:");

和：

     rules: {
        event_date: { required: true, dateRange: "event_date" },
    },

Answer 3

在根据文档尝试了几种疯狂的变化后，我发现这种方法并不能像示例中显示的那样工作。这是我发现我必须做的。 我为 EndDate 字段添加了一条规则，并让它调用函数 dateRange。只有这样 dateRange 函数才会触发。

我认为生成的脚本更加清晰，这让我怀疑我看到的示例已经过时了。

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.");

    jQuery("#mainForm").validate({
        rules: {
            "Title": "required",
            "SourceName": "required",
            "Url": "required",
            "FullText": "required",
            "PublicationDate": "required",
            "SourceName": "required",
            "CategoryCount": { required: true, min: 1 },
            "EndDate": { required: true, date: true, dateRange: true }
        },
        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.",
            "SourceName": "Please select a source for this report.<br />",
            "CategoryCount": "Please specify at least one category.",
            "EndDate": "Please check your dates. The start date must be before the end date."
        }
    });

    // 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);
    });
});