剑道淘汰赛+引导4验证

我使用的剑道基因敲除的一些组件，但似乎淘汰赛验证不会在errorElementClass值添加到剑道部件使红色边框和错误消息的颜色没有设置剑道淘汰赛+引导4验证

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/

有没有办法做到这一点？

来源

2017-08-23 dot404

knockout无法将is-invalid类添加到kendo日期选择器的原因是因为它们已被kendo小部件嵌套在跨度中。有两种方法可以做到这一点，但我会建议：

在加载时显示验证消息并绑定自定义验证程序，该程序会将is-invalid类添加到日期选择器的剑道输入中，并向父级添加另一个类

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

当前包裹日期选择器inpput箱剑道跨度

我已经更新了你的提琴updated fiddle。

所有你需要做的就是剑道样式表加载后您的主样式表。

来源

2017-08-25 15:52:39 Haby

剑道淘汰赛+引导4验证

回答

相关问题