Knockout-Contrib / Knockout-Contrib/Knockout-Validation

Placing custom validation template

Open
#456 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1k
Forks
366
PR merge metrics
No merged PRs in 30d

Description

Hi!

I have the need to place the validation message somewhere else in the dom. Additionally I want to also display validation messages for other bindings than the "value" binding. This is because I am using "knockout kendo" and that in turn does not always use the "value" binding only.

So one solution would be using the "validationMessage" binding, but that is insufficient as I cannot reuse my "messageTemplate" there.

So instead of




I created an additional binding handler




the "validationElementFor" binding replaces its owning element with the automatically created knockout validation validationElement and also takes the "messageTemplate" into account.

Here is the binding:

```
ko.bindingHandlers['validationElementFor'] = {
update: function (element, valueAccessor) {
var obsv = valueAccessor(),
config = utils.getConfigOptions(element), // THIS REFERENCES INTERNAL utils FUNCTION!!
val = ko.utils.unwrapObservable(obsv),
msg = null,
isModified = false,
isValid = false;

// if we're told to use a template, make sure that gets rendered
if (config.messageTemplate) {
ko.renderTemplate(config.messageTemplate, { field: valueAccessor() }, null, element, 'replaceNode');
} else {
ko.applyBindingsToNode(element, { validationMessage: valueAccessor() });
}

}
};
```

My problem: I cannot re-use the function utils.getConfigOptions(element) if I only add the binding in a separate javascript module and I do not want to copy loads of internal knockout validation stuff (such as the complete utils part) in order to get this working.
Could you provide me with some hint in how to do this best? Or even add this (or a similar) binding to the knockout validation library?

Contributor guide

Open the contributing guide

Research direction

Start with the proposed validationElementFor binding and trace how utils.getConfigOptions(element) supplies messageTemplate to the existing validationElement and validationMessage bindings. Read the surrounding Knockout Validation binding and utility entry points, then determine the supported way to reuse that configuration for non-value bindings. Done means the requested message placement and template behavior work without copying internal utilities.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.