使用 Kendo UI 下拉列表进行 MVC 验证

Question

我正在从事一个严重依赖 KendoUI 的项目。

业务需求要求我使用带有 MVC 验证的 KendoUI 表单元素。

这适用于标准文本框元素，但是当我需要使用 Kendo DropDownList 小部件时，我遇到了 MVC 验证显示的问题。

我的剑道 DDL：

 @Html.HiddenFor(m => m.State)
            @(Html.Kendo().DropDownListFor(m=>m.SateName)
                  .HtmlAttributes(new {title = Web.Resource.Resources.State, tabindex = "0", @class = "form-control",})
                  .OptionLabel(" ")
                  .Name("StateName")
                  .AutoBind(true)
                  .ValuePrimitive(true)
                  .DataTextField("Text")
                  .DataValueField("Value")
                  .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("GetJsonStates", "Account").Data("getSelectedCountryId"));

                  })
                  .Value(Model.State)
                  )

生成的输出：

 <span aria-busy="false" aria-readonly="false" aria-disabled="false" aria-owns="StateName_listbox" tabindex="0" aria-expanded="false" aria-haspopup="true" role="listbox" unselectable="on" class="k-widget k-dropdown k-header form-control" title="Province" style="">
<span unselectable="on" class="k-dropdown-wrap k-state-default">
<span unselectable="on" class="k-input"> </span><span unselectable="on" class="k-select">
<span unselectable="on" class="k-icon k-i-arrow-s">select</span>
</span>
</span>
<input style="display: none;" data-role="dropdownlist" class="form-control input-validation-error" data-val="true" data-val-required="The State field is required." id="StateName" name="StateName" title="Province" type="text"></span>

如果您仔细查看从 KendoUI 生成的隐藏输入，您会发现 MVC 验证正在向其中添加验证错误，而不是下拉列表。

例如 class=" ..input-validation-error"

验证工作正常，但从 UI 角度来看，我无法识别有错误的字段。在下图中，您可以看到错误样式已应用于所有标准文本框，但未应用于选择列表（即：省和州）。

有人可以解决这个问题吗？我被这个卡住了。

请注意： 剑道验证不是一个选项（业务要求）。 此外，这是一个包含许多表单的大型 Web 应用程序，因此在此示例中使用一次性 JS 解决方案是不可行的。

Answer 1

我有同样的问题，所以我覆盖了 kendoValidator：

_kendoValidator = $.fn.kendoValidator;
$.fn.kendoValidator = function (options) {
    var that = this;
    if (options == null) options = {};
    var oldvalidate = options.validate;
    var validate = function (e) {
        that.find('input,textarea,select').each(function () {
            var input = $(this);
            var datarole = input.attr('data-role');
            var invalid = input.hasClass("k-invalid");
            var container = input;
            if (datarole == 'numerictextbox' || datarole == 'datepicker' || datarole == 'timepicker' || datarole == 'multiselect' || datarole == 'upload') container = input.parent();
            else if (datarole != null) container = input.parent().find('span').eq(0);
            container.toggleClass('widget-validation-error', invalid);
        });
        if (oldvalidate != null) $.proxy(oldvalidate, e.sender)(e);
    }
    options.validate = validate;
    return _kendoValidator.call(this, options);
}

widget-validation-error 是 css 类：

.widget-validation-error {
    border: 1px solid #ff0000 !important;
}