Question

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

    @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; }

我知道我应该为datepicker添加一个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字段，每次更改datepicker时都必须手动调用表单上的validate插件。

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

Inline Datepicker的不显眼验证不起作用，适用于非内联Datepicker

2 个答案: