-1

Already have experience using bootstrap popovers with separate div's... also have expience with ko.validation with native and custom validation rules but in input group text have unspected 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>

Error menssage is showed under Product input text. It's posible get error span in a popover?

ringstaff
  • 2,331
  • 1
  • 16
  • 25
Carlos Mosquera
  • 1
  • 2

1 Answers1

0

After tons of searchs, test and reads I decide create this, just be sure to press RUN button before your test, I'm still learning jsfiddle.

KO.Validation problems.

Suddenly I realize something wrong with KO.Validations: for more than one native validation rules configuration or for async rules with or without another rules insertMessages: false option DON'T WORK, may be I'm wrong... verify for your self.

Valor and Valor3 controls have spected behavior... and Valor2 and Valor4 have original behavior.

Obviusly it will not be the last option and may be Valor2 and Valor4 have another error that I miss.

Here's the final code to solve problem:

    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");
        }
    }
};
Carlos Mosquera
  • 1
  • 2