如何为 Kendo UI DropDownList 和 ComboBox 启用 ASP.Net MVC 客户端验证？答案

【问题标题】：How do you enable ASP.Net MVC client validation for Kendo UI DropDownList and ComboBox?如何为 Kendo UI DropDownList 和 ComboBox 启用 ASP.Net MVC 客户端验证？
【发布时间】：2012-09-06 19:05:50
【问题描述】：

当我在 MVC Razor 视图中使用 Kendo UI ComboBox 和 DropDownList 控件时，客户端验证不会触发。这是一个例子：

@using Kendo.Mvc.UI
@model KendoDropDownTest.Models.TestModel

@{
    ViewBag.Title = "Kendo Drop Down and Combo Box Test";
}

<h2>Kendo Drop Down and Combo Box Test</h2>

@using (Html.BeginForm())
{
    @Html.ValidationSummary()

        <div>
            @Html.LabelFor(x => x.DropDownValue)
            @(Html.DropDownListFor(x => x.DropDownValue, Model.Options, "-- Select an Option --"))
            @Html.ValidationMessageFor(x => x.DropDownValue)
        </div>

    <fieldset>
        <legend>Kendo</legend>
        <div>
            @Html.LabelFor(x => x.KendoComboValue)
            @(Html.Kendo().ComboBoxFor(x => x.KendoComboValue)
                  .BindTo(Model.Options.Select(x => x.Text)))
            @Html.ValidationMessageFor(x => x.KendoComboValue)
        </div>

        <div>
            @Html.LabelFor(x => x.KendoDropDownValue)
            @(Html.Kendo().DropDownListFor(x => x.KendoDropDownValue)
                .OptionLabel("-- Select an Option --")
                .BindTo(Model.Options))
            @Html.ValidationMessageFor(x => x.KendoDropDownValue)
        </div>
    </fieldset>

    <input type="submit" value="Submit" />
}

以及对应的型号：

public class TestModel
{
    [Required]
    public string DropDownValue { get; set; }
    [Required]
    public string KendoComboValue { get; set; }
    [Required]
    public string KendoDropDownValue { get; set; } 

    public SelectListItem[] Options = new[]
    {
        new SelectListItem
        {
            Text = "Option 1",
            Value = "1"
        }, 
        new SelectListItem
        {
            Text = "Option 2",
            Value = "2"
        }, 
        new SelectListItem
        {
            Text = "Option 3",
            Value = "3"
        }, 
    };
}

提交表单时，非 Kendo UI 下拉菜单会适当地显示验证错误，但 Kendo 控件不会。请让我知道是否有一种方法可以为这些控件启用客户端验证，而无需手动连接它。

以下剑道论坛帖子附有完整的示例解决方案： http://www.kendoui.com/forums/mvc/dropdownlist/mvc-client-validation-not-working.aspx

【问题讨论】：

标签： asp.net-mvc jquery-validate kendo-ui unobtrusive-validation

【解决方案1】：

根据剑道论坛上的回复，验证不起作用的原因是 jquery validate 默认情况下不验证隐藏字段。最简单的更改方法是使用 $.validate.setDefaults 方法来覆盖该行为，如下所示：

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

这仍然不会将“input-validation-error”类添加到组合框或下拉列表中，但至少它会添加验证错误，并且不会提交表单。

【讨论】：

对于 jQuery Validate 1.9，你必须set ignore to an empty array。
发现了一个很好的补充。如果您有其他控件不想在隐藏时进行验证，但希望隐藏特定控件，您可以将它们添加到 not(ignore) 以扩展这个有用的提示：例如，我们将 .kendoDD 标签放在Kendo Dropdown，然后设置： $.validator.setDefaults({ ignore: ":hidden:not(.kendoDD)" }); stackoverflow.com/questions/20287567/…
添加到@mike 的评论，也可以使用:hidden:not([data-role='dropdownlist'])。该数据角色已经存在，因此无需添加任何标签

【解决方案2】：

在尝试了很多东西之后，我得出一个结论，ASP.NET MVC 验证与 jQuery unobtrusive js 库和剑道验证是两个不同且不兼容的野兽。我连接了服务器端和客户端代码以验证 kendo 多选控件，但没有真正起作用，包括 jQuery 验证器 ($.validator) 上的 setDefaults() 方法。我终于找到了这个帖子http://www.macaalay.com/2014/02/15/enabling-asp-net-mvc-client-validation-for-kendo-ui-components/，不得不单独连接剑道验证，但需要注意的是它没有集成到 ASP.NET MVC 验证摘要控件和一般的 ASP.NET MVC 验证 API 中。

这里是代码 sn-p 来演示必须做什么。同样，可能会有更清洁和更好的方法。在我的示例中，在我的 ViewModel 对象上，此 sn-p 与绑定属性“SelectedIDs”上的必需验证属性结合使用。 “divCategories”是包含剑道多选控件的 div 元素。这个现在对我有用，直到我得到一种更清洁的方法：

Html.Kendo().MultiSelectFor(m => m.SelectedIDs)
            .Name("SelectedIDs")
            .BindTo(CategoryItems)
            .HtmlAttributes(new { @class = "height100pc", @onchange= "$('#divCategories').kendoValidator().validate();" })

无论如何，您都可以将内联 javascript 分离到脚本标记或实用程序 javascript 文件中。

祝走这条路的人好运..

【讨论】：

【解决方案3】：

使用这个脚本会更好：

<script>
    $(function () {
        $("form").kendoValidator();
    });
</script>

您可以参考这个链接。

http://www.macaalay.com/2014/02/15/enabling-asp-net-mvc-client-validation-for-kendo-ui-components/

【讨论】：