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

[keiserS]

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

[DiponRoy]

try this one https://www.codeproject.com/Tips/796208/Knockout-validation-error-message-Bootstrap-v-i
or create something as expected. But the only problem is if you want to use multiple validations patters is the same page, it may not work as expected.