I came across a problem, where I couldn't find a solution yet: I've created a MVVM based form with a kendo combobox (<select data-role="combobox" name="my-element">), a custom invalid message element for this <select> (<span class="k-invalid-msg" data-for="my-element">) and a custom validator. When validating both fields, the <select> and the <input> element of the widget, are given to the validator and are validated correctly. I now face the problem, that I'm not able to show the error message AND append the invalid class to the widget input automatically. There are two possible cases:
1) The widget <input> is validated. This way the input gets a k-invalid class and I can style the element to give an optical error. But at the same time the message <span> is ignored, since the name of the widget <input> and data-for do not match because kendo had to add an _input extend to the class.
2) The <select> is validated. This way, the message is shown correctly, but the k-invalid class is given to the hidden <select> element, while the <input> of the widget remains untouched.
What I would expect is that I can validate the widget <input> while the k-invalid class is appended to the widget itself and the k-invalid-msg <span> I defined for the original <select> element would be used to show the widgets error message. Why is this not the case?