Question

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

标题 - 文本框
SourceName - 文本框
网址 - 文本框
FullText - 文本框
PublicationDate - 使用jQuery datepicker 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

根据文档尝试了几种不同的变化后，我发现这种方法不能像样本中显示的那样工作。这是我发现我必须做的事情。我为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);
    });
});

Answer 3

这对我来说可以确保所选日期不在当前日期之前：

$.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" },
    },

Jquery验证日期范围失败

3 个答案: