Jquery验证日期范围失败

Question

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

• 标题 - 文本
• SOURCENAME - 文本
• URL - 使用jQuery日期选择器UI
文本 - 文本
• 全文 - 文本
• PublicationDate
• 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); 
}); 

}）;

它验证除日期范围外的所有内容。我尝试了更多的自定义操作，但是在返回语句之前显式创建Date对象（在演示中，它全部在一行中），但这没有什么好处。有没有人有经验使这实际上工作？

编辑： 我添加了一行来调用dateRange方法时弹出警告消息，但它永远不会显示。我想知道验证者的组和规则部分是不是一起工作。

Answer 1

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

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

要实际创建datepickers吗？

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