无法弄清楚如何将 jquery.unobstrusive 应用于 jquery.ui.datepickers 以要求日期字段

Question

使用 MVC3 Razor，我有一个包含一些文本的部分视图、两个文本框（开始日期和结束日期）、一个取消按钮和一个搜索按钮。

当在 StartDate 和 EndDate 文本框中输入无效日期时，文本框会突出显示红色，并带有日期选择器使用的不显眼的装饰？

我不知道如何要求这些字段并将它们突出显示为红色，就像无效数据输入一样。

这是我的代码

<script type="text/javascript">
$(document).ready(function () {
    $('.date').datepicker({ dateFormat: "mm/dd/yy" });

    $("#printnoteform").validate({
        rules: {
            startdate: {
                required: true
            },
            enddate: {
                required: true
            }
        },
        messages: {
            startdate: {
                required: "Required"
            },
            enddate: {
                reqquierd: "Required 2"
            }
        }
    });
});
</script>

表单...

@using (Html.BeginForm("PrintNotes", "Note", FormMethod.Post, new { id = "printnoteform", name = "printnoteform" }))
{
    ......

StartDate & HTML EndDate

<input type="text" id="startdate" name="startdate" class="date" />
<input type="text" id="enddate" name="enddate" class="date" />

我没有浏览器错误，StartDate 和 EndDate 不是模型的一部分，如果不需要的话我不想制作一个。 Web.config 设置正确。

我缺少什么？

Answer 1

您有两种相互排斥的可能性：

1. 使​​用 jquery unobtrusive
2. 手动连接表单的验证规则

如果您想使用 jquery unobtrusive，则不应手动添加任何 .validate规则到你的表格（就像你所做的那样）。这是由 jquery unobtrusive 脚本自动完成的。当然，为了能够做到这一点，您的输入字段应该使用 HTML5 data-* 属性进行修饰，以指示要使用的规则和消息。例如：

<input class="text-box single-line" data-val="true" data-val-required="The startdate field is required." id="startdate" name="startdate" type="text" value="" />
<input class="text-box single-line" data-val="true" data-val-required="The enddate field is required." id="enddate" name="enddate" type="text" value="" />

通常，这是当您使用视图模型并绑定到其属性时标准 Html 帮助程序（例如 EditorFor）生成的输出。他们在视图模型上使用数据注释来推断验证规则并将它们转置为 data-* 属性。

第二种可能性是手动连接验证规则。在这种情况下，您应该删除 jquery 不引人注目的脚本的任何痕迹，因为它将与表单上的 .validate 规则发生冲突。在这种情况下，由您来定义规则和消息。