劍道淘汰賽+引導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驗證

回答

相關問題