Hi there
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?
3 Answers, 1 is accepted
Is it possible for you to create a small but runnable Dojo page which dmeonstrates your current implementation? In this way I will be able to examine the scenario in details and assist you further.
Thank you in advance for your time and cooperation.
Regards,
Alexander Valchev
Telerik
Rank 1
Hi Alexander
The Dojo is new territory for me. So I hope this works: http://dojo.telerik.com/EmIzA
It's a simple example of how the validation for kendo widget is handled by my current knowledge. What I am missing here, is an automatic behaviour like on example 3, where the widget input gets an invalid class and the .k-invalid-msg is used as well. Currently this is only possibly with a 'hack' (in my opinion).
Did I oversee something, or is this the expected behaviour?
Regards
Patric
Thank you for the example.
The issue is caused by the way ComboBox widget works - it creates second input element and hides the original one.
Custom validation rules should ran over the original hidden input. The 'k-invalid' class is also intended to be added to the original (currently hidden) input.
One possible option to workaround this is the approach that you demonstrated. Another solution that you may try is using MutationObserver (not supported in old IE browsers).
Regards,
Alexander Valchev
Telerik