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

Question

我正在做一个非常依赖KendoUI的项目。

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

这对于标准文本框元素很好，但是当我被要求使用Kendo DropDownList widges时，我遇到了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验证正在向其中添加验证错误，而不是下拉列表。

输入验证错误"

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

有人有这方面的工作吗？我被困在这个上面了。

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

Answer 1

我也有同样的问题，所以我过度编写kendValidator：

_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);
}

和小部件验证错误是css类：

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