Question

我对某些组件使用了kendo-knockout，但似乎淘汰验证没有将errorElementClass值添加到kendo小部件，因此未设置红色边框和错误消息颜色

ko.validation.configure({
    insertMessages: false,
    errorElementClass: 'is-invalid',
    decorateElement: true,
    decorateInputElement: true,
    messagesOnModified: true
});

var ViewModel = function() {
    var self = this;
    self.firstName = ko.observable().extend({ required: true });
    self.startDate = ko.observable(null).extend({ required: true });
    self.endDate = ko.observable(null).extend({ required: true });
    self.errors = ko.validation.group(self);

    this.validate = function() {
        self.errors.showAllMessages(true);
    }
};

ko.applyBindings(new ViewModel());




<div class="form-group row">
    <label for="date" class="col-3 col-form-label">Date</label>
    <div class="col-6">
        <input class="form-control" id="date" data-bind="kendoDatePicker: startDate">
        <div class="invalid-feedback">
            <span data-bind="validationMessage: startDate"></span>
        </div>
    </div>
</div>

以下是一个示例：http://jsfiddle.net/tqrv513g/

有什么办法吗？

Answer 1

淘汰赛无法将无效类添加到你的剑道日期选择器的原因是因为它们已被剑道小部件嵌套在跨度中。有两种方法可以做到，但我建议：

在加载时显示验证消息并绑定一个自定义验证器，它将把无效类添加到日期选择器的kendo输入中，并将另一个类添加到当前包装datepicker inpput框的父级kendo span：

    self.getInvalidCssClass =  function (obs) {

       var parentContext = $(".k-picker-wrap");

       var cssClass = '';
       if (!obs.isValid()) {
           parentContext.addClass('kendo-invalid-date');
           cssClass = 'is-invalid'
       } else {
          parentContext.removeClass('kendo-invalid-date');
       }
        return cssClass;
    };

HTML：

<div class="form-group row">
        <label for="date" class="col-3 col-form-label">Date</label>
        <div class="col-6">
            <input class="form-control" id="date" data-bind="kendoDatePicker: startDate, css: getInvalidCssClass(startDate)">
            <div class="invalid-feedback">
                <span data-bind="validationMessage: startDate"></span>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="date2" class="col-3 col-form-label">End date</label>
        <div class="col-6">
            <input class="form-control" id="endDate" data-bind="kendoDatePicker: endDate, css: getInvalidCssClass(endDate)">
            <span class="validationMessage" data-bind="validationMessage: endDate"></span>
        </div>
    </div>

的CSS：

.kendo-invalid-date {border-color: Red;}

我已更新你的小提琴updated fiddle。

您所要做的就是在剑道样式表之后加载主样式表。

kendo-knockout + bootstrap 4验证

1 个答案: