Knockout-Contrib / Knockout-Contrib/Knockout-Validation
Issue with validation message breaking "input-group" UI in Bootstrap v.3.x w/ how to fix it
- Dominant language
- JavaScript
- Stars
- 1k
- Forks
- 366
- PR merge metrics
- No merged PRs in 30d
Description
I have noticed an interesting problem with placing span error element when using bootstrap "input-group" with "input-group-addon" on validation element. Inserting validation message actually breaks UI.
Screen shot: https://www.screencast.com/t/kcrVq80Cm
I have made fiddle: https://jsfiddle.net/keiserSoze/swovdh1s/
To be able to fix it, you need to override 2 things, in my case. Override of "**insertValidationMessage**" and "**validationCore.init**" function.
So I would propose a change in validationCore.init function:
```
var validationMessageElement = kv.insertValidationMessage(element);
// if we're told to use a template, make sure that gets rendered
// FIX: check if element is really created
if (validationMessageElement) { // <-------- this is block missing to avoid further errors in case of insertValidationMessage override
if (config.messageTemplate) {
ko.renderTemplate(config.messageTemplate, {
field: observable
}, null, validationMessageElement, 'replaceNode');
} else {
ko.applyBindingsToNode(validationMessageElement, {
validationMessage: observable
});
}
}
```
with this change it's possible to make override of insertValidationMessage function to be able to modify creation of validation message to your need.
P.S. not sure if this was already discussed
Contributor guide
Research direction
Start with validationCore.init and insertValidationMessage, then reproduce the issue using the linked JSFiddle with Bootstrap 3 input-group and input-group-addon elements. Done means validation messages no longer break the input-group UI, and the initialization path handles cases where insertValidationMessage does not create an element.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bootstrap, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100