Kendo-Knockout + Bootstrap 4 Validierung

Question

Ich bin mit Kendo-Knockout für einige Komponenten, aber es scheint, dass Knockout Validierung hinzufügen nicht den errorElementClass Wert auf die Kendo-Widgets, so dass die roten Rand und Fehlermeldung Farbe nicht

gesetzt

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> 

Hier

ist ein Beispiel: http://jsfiddle.net/tqrv513g/

gibt es eine Möglichkeit, es zu tun?

Answer 1

Der Grund, warum knockout die is-invalid-Klasse nicht zu Ihren Kendo-Datumswählern hinzufügen kann, liegt daran, dass sie in Bereichen von Kendo-Widgets verschachtelt wurden. Es gibt zwei Möglichkeiten dies zu tun, aber ich würde empfehlen:

Zeige die Validierungsnachrichten beim Laden und Binden eines benutzerdefinierten Validators, der die is-invalid-Klasse zu deiner Kendo-Eingabe für Datumswähler hinzufügt und eine weitere Klasse zum Eltern hinzufügt Kendo Spanne, die derzeit die picker Inpput Box Verpackung:

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

Ich habe deine Geige updated fiddle aktualisiert.

Alles, was Sie tun müssen, ist Ihr Haupt-Stylesheet nach den Kendo-Stylesheets zu laden.