Question

当我在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控件不会。如果有办法为这些控件启用客户端验证，请告诉我，而无需手动连接它。

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

Answer 1

根据对Kendo论坛的响应，验证无效的原因是因为jquery validate默认情况下不验证隐藏字段。更改它的最简单方法是使用$ .validate.setDefaults方法来覆盖这种行为，如下所示：

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

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

Answer 2

在尝试了很多东西之后，我得出结论，使用jQuery不显眼的js库和kendo验证的ASP.NET MVC验证是两种不同且不兼容的野兽。我连接了服务器端和客户端代码以验证一个kendo Multi-Select控件，但没有什么真正起作用，包括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。

以下是演示必须完成的代码段。同样，可能会有更清洁和更好的方法。此代码段与我的ViewModel对象上的示例中绑定属性“SelectedIDs”的必需验证属性一起使用。 “divCategories”是包含kendo多选控件的div元素。这个对我有用，直到我得到一个更清洁的方法：

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

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

祝所有人踏上这条道路，祝你好运。

Answer 3

最好使用这个脚本：

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

你可以参考这个链接。

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

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

3 个答案: