Knockout-Contrib / Knockout-Contrib/Knockout-Validation

Issue with validation message breaking "input-group" UI in Bootstrap v.3.x w/ how to fix it

Open
#646 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 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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.