Knockout-Contrib / Knockout-Contrib/Knockout-Validation
How can I decorate different input element?
- Dominant language
- JavaScript
- Stars
- 1k
- Forks
- 366
- PR merge metrics
- No merged PRs in 30d
Description
I am using Kendo and their combobox is a combination of different divs and spans, so the built in mechanism to decorate the input element (change the border color) doesn't work since that's not actually the visible part.
I did find the trick below and it does work, problem is, it ends up immediately highlighting the required combos in red as soon as the form loads when creating new records.
How can I hook the default mechanism so that I can decorate the correct element AND not also have errors be highlighted immediately on form load?
Trick to highlight input element:
ko.bindingHandlers.parentvalElement = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
if (element.nodeName!=="SELECT") return;
var valueIsValid = valueAccessor().isValid();
if(!valueIsValid ) {
$(element.parentElement.children[0]).addClass("FieldError");
}
else {
$(element.parentElement.children[0]).removeClass("FieldError");
}
}
};
Contributor guide
Research direction
No repository file or test is named. Start by tracing the default validation decoration mechanism and the parentvalElement binding shown in the issue; done means Kendo comboboxes use the visible element for the border styling without showing required-field errors when a new form first loads.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100