0

I am trying to use Knockout Validation in combination with Bootstrap Combobox Plugin.

I have a select control that is bound to my observable property which has the required attribute (for KO Validation). 

 <select data-bind="attr: { options: TypeAheadSource, value: XYZ, validationOptions: {errorElementClass: 'input-validation-error'}, typeaheadCombobox: {}"></select>

I have a custom binding associated with the select control in which I basically just call the Bootstrap Combobox Plugin. That creates a Div with an input control over the select control and hides the select control.

The knockout validation fires up when I dont select a value in the comobox and shows the error message next to the control BUT the field is not highlighted. Here is how it looks like

enter image description here

As you can see, the error message shows up but the input field is not highlighted.

Here is the final html that is generated when the validation fires.

    <div class="combobox-container">
    <input style="position:static;" type="text" autocomplete="off" data-bind="{ value: Name, validationOptions: { errorElementClass: 'input-validation-error' }" class="input-large">
<span class="add-on btn dropdown-toggle" data-dropdown="dropdown"><span class="caret"></span>
<span class="combobox-clear"><i class="icon-remove"></i></span></span>
<select data-bind="validationOptions: { errorElementClass: 'input-validation-error' }, options: TypeAheadSource, value: Name, typeaheadSimpleCombobox: { }" class="combobox input-validation-error"></select>
    </div>

As you can see, the select control (which was hidden by the plugin) gets the validation error class I defined ('input-validation-error') but the input control created by the plugin does not. That is the main issue here.

So, I thought it could be becasue the input control is not directly bound to the property. So, I tried adding the same value binding as the select control to the input control created by the plugin inside the custom binding. I also added the validationOptions binding. These changes didnt work either.

Strange thing is I also have a typeahead textbox bound to another property which uses a similar design (custom binding to create the typeahead plugin over an input control) and the validation + highlighting works perfectly on that. Here is the final html from that.

<input type="text" data-bind="value: xyz, validationOptions: { errorElementClass: 'input-validation-error' }, typeaheadTextBox: { source: $data.TypeAheadSource }" class="typeaheadValue input-mini" data-provide="customtypeahead" autocomplete="off">

Could someone tell me if I am missing any additional steps. I am sure you might need more details. Please leave a comment and I will try to add more details.

Thanks.

Krishna Veeramachaneni
  • 2,131
  • 3
  • 18
  • 24
  • I think I know what the issue is. Even though I am setting the value bindings on the input control created by the plugin, the bindings are applied before the control is created and so, I need to reapply the bindings specifically on the input control created by the plugin. – Krishna Veeramachaneni May 20 '13 at 17:18

1 Answers1

0

I figured the issue. In case someone has the same issue, here is what I did. Even though I setting up the value bindings on the input control created by the plugin, the bindings were applied before the control is created and so, I had to reapply the bindings specifically on the input control created by the plugin. That did the trick for me.

Krishna Veeramachaneni
  • 2,131
  • 3
  • 18
  • 24
  • 1
    I wouldn't think you'd need to *re*-apply any bindings ... might be worth looking at your custom binding handler to see if there's something in there. I have done exactly what you described for another project, but used the `select2` control and it works just fine. – GotDibbs May 20 '13 at 19:52
  • I am not sure how select2 does it but here's my question. I am creating the plugin in my custom binding which itself will be called when the ko.applybindings is executed. Right? Now, if a control is added to DOM after first applybindings is done, how would the new control created by the plugin bind to the observable property if we dont let it know what to bound to? May be select2 does something intrinsically to take care of keeping the select and input controls in sync. I will try it and check out. – Krishna Veeramachaneni May 20 '13 at 21:02
  • 1
    I bound the value of the input control to the actual observable on my model, and then have a *separate* custom binding for the select control to which I just passed in a set of static options. The custom binding handler initializes the control and then in the update function I just fire the change event on the control. Check this out for the example I based my implementation off of: https://github.com/ivaynberg/select2/wiki/Knockout.js-Integration – GotDibbs May 20 '13 at 21:15