Twitter bootstrap 在引导弹出窗口中显示ko.validation错误消息

已经有使用引导式弹出框和单独div的经验。。。还可以使用ko进行验证。使用本机和自定义验证规则进行验证，但输入组中的文本具有未标注的apereance：

<div class="input-group">
   <div class="input-group-btn clearfix">
      <button type="button" class="btn btn-default" data-bind="text: SupplierName" tabindex="-1"></button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
         <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" data-bind="foreach: SupplierList, valueAllowUnset: true">
         <li><a href="#" data-bind="click: $parent.SupplierSelection"><span data-bind="text: text"></span></a></li>
      </ul>
   </div>
   <input type="text" class="form-control"
          data-bind="value: Product, validationOptions: { errorElementClass: 'error' }">
</div>

---

错误信息显示在产品输入文本下。有可能在popover中获得错误范围？

在我决定创建的大量搜索、测试和读取之后，请确保在测试之前按运行按钮，我仍在学习JSFIDLE

KO.验证问题

突然，我意识到KO有问题。验证：对于多个本机验证规则配置，或者对于有或没有其他规则的异步规则

insertMessages:false

选项不起作用，可能是我错了。。。自己验证一下

Valor和Valor3对照组观察了行为。。。和Valor2和Valor4具有原始行为

很明显，这不是最后一个选项，可能是Valor2和Valor4还有另一个我错过的错误

以下是解决问题的最终代码：

    ko.bindingHandlers.SetCSSandPopover = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var cssClass = ko.utils.unwrapObservable(valueAccessor);
        var obs = ko.utils.unwrapObservable(allBindingsAccessor()).value;

        var decorateElement = obs.isModified() && !obs.isValid();
        if (decorateElement) {
            $(element).parent().addClass(cssClass);
            $(element).parent().parent().addClass(cssClass);
            console.log($(element).parent().parent());
            // insertMessages: false NEVER WORK with more than one validator o asyn rules
            $(element).next().attr("hidden", false);
            var msg = $(element).next()[0].outerHTML; // BEFORE hide message span
            $(element).next().attr("hidden", true);
            $(element).removeAttr("title");
            $(element).parent().parent().popover({
                trigger: "hover",
                html: true,
                title: "Corregir el error:",
                content: msg,
                container: "body",
                placement: "bottom"
            });
        } else {
            $(element).parent().removeClass(cssClass);
            $(element).parent().parent().removeClass(cssClass);
            $(element).parent().parent().popover("destroy");
        }
    }
};