使用typeahead组合框插件进行敲除验证

Question

我正在尝试将Knockout验证与Bootstrap Combobox Plugin结合使用。

我有一个select控件绑定到我的observable属性，该属性具有必需属性（用于KO验证）。

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

我有一个与select控件关联的自定义绑定，我基本上只调用Bootstrap Combobox插件。这将创建一个带有对选择控件的输入控件的Div，并隐藏选择控件。

当我不在comobox中选择一个值并显示控件旁边的错误消息但未突出显示该字段时，敲除验证会激活。这是它的样子

如您所见，错误消息显示但输入字段未突出显示。

以下是验证触发时生成的最终html。

    <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>

正如您所看到的，select控件（由插件隐藏）获取了我定义的验证错误类（'input-validation-error'），但插件创建的输入控件没有。 这是主要问题。

所以，我认为可能是因为输入控件没有直接绑定到属性。因此，我尝试将与select控件相同的值绑定添加到由自定义绑定中的插件创建的输入控件。我还添加了validationOptions绑定。这些变化也没有用。

奇怪的是我还有一个类型文本框绑定到另一个使用类似设计的属性（自定义绑定在输入控件上创建typeahead插件），验证+突出显示完全适用于此。这是最终的HTML。

<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">

有人可以告诉我，如果我错过了任何额外的步骤。我相信你可能需要更多细节。 请发表评论，我会尝试添加更多详细信息。

感谢。

Answer 1

我想到了这个问题。如果有人有同样的问题，这就是我所做的。 即使我在插件创建的输入控件上设置了值绑定，也会在创建控件之前应用绑定，因此，我必须专门对插件创建的输入控件重新应用绑定。这对我有用。