内联日期选择器不工作不显眼的验证，工作正常，非内联日期选择器 [英] Unobtrusive Validation for Inline Datepicker not working, works fine for non-inline Datepicker

问题描述

我没有使用jquery.ui的日期选择，因为我需要选择整个一周，在不同条件下的多个日期，所以我使用的在我的日期字段的EditorTemplate基思·伍德的日期选择器：

I didn't use jquery.ui's datepicker because I needed to select an entire week and multiple dates under different conditions, so I am using Keith Wood's datepicker in an EditorTemplate for my Date fields:

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

验证使用文本框和具有日期选择器，弹出时，工作得很好;但我真正想要的是使用内联日期选择器，但我不能让这些验证条件下工作：

Validation works just fine when using a textbox and having the datepicker "pop-up"; but what I really want is to use an inline datepicker, but I can't get validation to work under these conditions:

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

下面是剪断，它在我的自定义客户端验证：

Here is a snip-it of my custom client-side validation:

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

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

And here is the definition of the DateTime field in my Data Class:

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

我明白，我要补充的ONSELECT的日期选择器来填充日期（S）的隐藏字段，但无论如何，当隐藏字段值为空，我应该得到一个错误，但它不是验证。 HTML标记呈现为以下内容：

I understand that I should add an onSelect for the datepicker to populate the hidden field with date(s), but regardless, I should get an error when the hidden field value is empty, but its not validating. The html markup is rendered as the following:

    <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>

我发现<一个href=\"http://stackoverflow.com/questions/7924668/validate-an-inline-jquery-datepicker-using-jquery-validation\">a类似的未回答的问题，看起来开发商是有同样的问题，但没有发过解决方案。任何想法，我要去的地方错了？

I found a similar un-answered question that looks the developer is having the same problem, but no posted solution. Any ideas to where I am going wrong?

推荐答案

贾森是正确的。默认情况下，jQuery验证跳过/忽略不可见的输入元素。这同样适用于输入类型=隐藏元素，或有/继承显示，即使文本框：无; CSS 。有一个名为设置忽略，它的默认值是这样的：

Jason is right. By default, jquery validation skips / ignores non-visible input elements. This goes for input type="hidden" elements, or even text boxes that have / inherit display:none; CSS. There is a setting called ignore, and its default value looks like this:

ignore: ':hidden'

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

You can override this setting on your page with the following script:

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

这告诉JQuery验证不要忽略不可见元素验证。如果使用这个脚本，jQuery验证应自动，悄悄地验证字段您无需每次手动验证日期选择字段值我们改变。

This tells jquery validate not to ignore validation for non-visible elements. If you use this script, jquery validation should automatically, validate the field unobtrusively without you having to manually validate each time the datepicker field value us changed.

这篇关于内联日期选择器不工作不显眼的验证，工作正常，非内联日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！