knockout-kendo widgets with knockout validation not working

Question

I need to implement knockout validation with knockout-kendo.

I have this html:

<textarea class="k-textbox" data-bind="value: description"></textarea>
<input data-bind="kendoComboBox: { 
                  data: myOptions, 
                  value:myOptionId,
                  dataTextField: 'MyOptionName', 
                  dataValueField: 'MyOptionId'}"/>
<input data-bind="kendoDatePicker: {value: dueDate}"/>

Javascript:

...
viewModel: {
    description: ko.observable('').extend({ required: true }),
    dueDate: ko.observable('').extend({ required: true }),
    myOptions: ko.observableArray([]),
    myOptionId: ko.observable('').extend({ required: true })
}
...
    ko.applyBindingsWithValidation(self.viewModel, $ctx[0]);

The validation works fine for the description field, bound to the text area; but it doesn't work for the comboBox or the datePicker.

I have checked the documentation, and also this jsFiddle, but I haven't been able to get it to work.

Any help would be greatly appreciated.

Answer 1

It looks like the issue is that the <span class="validationMessage" data-bind="validationMessage: dueDate"></span> doesn't get automatically generated for knockout-kendo tags. Just add a tag per knockout-kendo element, ex:

<input data-bind="kendoComboBox: { 
                  data: myOptions, 
                  value:myOptionId,
                  dataTextField: 'MyOptionName', 
                  dataValueField: 'MyOptionId'}"/>
<span class="validationMessage" data-bind="validationMessage: value:myOptionId"></span>
<input data-bind="kendoDatePicker: {value: dueDate}"/>
<span class="validationMessage" data-bind="validationMessage: dueDate"></span>

Remember to put before your view model:

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});
ko.validation.registerExtenders();