内联日期选择器的不显眼验证不起作用，适用于非内联日期选择器

Question

我没有使用 jquery.ui 的 datepicker，因为我需要在不同的条件下选择一整周和多个日期，所以我在 EditorTemplate 中为我的 Date 字段使用 Keith Wood's datepicker：

    @model Nullable<DateTime>
    @{
        string name = ViewData.TemplateInfo.HtmlFieldPrefix;
        string id = name.Replace(".", "_");
        string dt = Model.HasValue ? String.Format("{0:d}",(string)Model.Value.ToShortDateString()) : string.Empty;
    }        
    @Html.TextBox("", dt, new { @class = "datefield", @type = "date", @id = id })
    <script type="text/javascript">
        $(document).ready(function () {
            $('#@id').datepick({
                renderer: $.datepick.themeRollerRenderer,
                multiSelect: 999
            });
        });    
    </script>

当使用文本框并让日期选择器“弹出”时，验证工作得很好；但我真正想要的是使用内联日期选择器，但我无法在这些条件下进行验证：

    @model Nullable<DateTime>
    @{
        string name = ViewData.TemplateInfo.HtmlFieldPrefix;
        string id = name.Replace(".", "_");
        string dt = Model.HasValue ? String.Format("{0:d}",(string)Model.Value.ToShortDateString()) : string.Empty;
    }

    <div class="kwdp">
    </div>
    @Html.Hidden("", dt, new { @class = "datefield", @id = id })
    <script type="text/javascript">
        $(document).ready(function () {
            $('.kwdp').datepick({
                renderer: $.datepick.themeRollerRenderer,
                multiSelect: 999
            });
        });    
    </script>

这是我的自定义客户端验证的一个片段：

    form.validate({ 
        rules:{
            StartDate: { 
                required: true, 
                dpDate: true 
            }
        },
        messages: {
            StartDate: 'Please enter a valid date (dd-mm-yyyy)'
        }
    });

这是我的数据类中 DateTime 字段的定义：

    [Required]
    [DataType(DataType.Date)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd-MM-yyyy}")]
    public Nullable<DateTime> StartDate { get; set; }

我知道我应该为日期选择器添加一个 onSelect 以使用日期填充隐藏字段，但无论如何，当隐藏字段值为空但它没有验证时，我应该会收到错误消息。 html 标记呈现如下：

    <input name="StartDate" class="datefield" id="StartDate" type="hidden" data-val-required="The StartDate field is required." data-val="true" data-val-date="The field StartDate must be a date." value=""/>

我正在使用以下库：

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>    
    <script src="@Url.Content("~/Scripts/datepick/jquery.datepick.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/datepick/jquery.datepick.ext.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/datepick/jquery.datepick.validation.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.validation.min.js")" type="text/javascript"></script>

我发现a similar un-answered question 看起来开发人员遇到了同样的问题，但没有发布解决方案。关于我哪里出错的任何想法？

Answer 1

杰森是对的。默认情况下，jquery 验证会跳过/忽略不可见的输入元素。这适用于input type="hidden" 元素，甚至是具有/继承display:none; CSS 的文本框。有一个设置叫ignore，它的默认值是这样的：

ignore: ':hidden'

您可以使用以下脚本覆盖页面上的此设置：

$.validator.setDefaults({
    ignore: ''
});

这告诉 jquery validate 不要忽略对不可见元素的验证。如果您使用此脚本，jquery 验证应该会自动验证该字段，而不需要您在每次更改 datepicker 字段值时手动验证。

Answer 2

据我了解，在 MVC3 中，隐藏的表单字段未通过客户端验证脚本进行验证。如果这就是你想要做的，为什么不直接隐藏文本字段？

@Html.TextBox("", dt, new { @class = "datefield", @type = "date", @id = id, style="display:none;" })

或者，如果您想将其保留为 @Html.Hidden 字段，则每次更改日期选择器时都必须手动调用表单上的验证插件。

 $("form").validate().form();