Knockout-Contrib / Knockout-Contrib/Knockout-Validation

How can I decorate different input element?

Open
#560 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.