Я пытаюсь использовать Knockout Validation в сочетании с плагином Bootstrap Combobox.
У меня есть элемент управления select, который привязан к моему наблюдаемому свойству, которое имеет обязательный атрибут (для проверки KO).
<select data-bind="attr: { options: TypeAheadSource, value: XYZ, validationOptions: {errorElementClass: 'input-validation-error'}, typeaheadCombobox: {}"></select>
У меня есть пользовательская привязка, связанная с элементом управления select, в котором я просто вызываю плагин Bootstrap Combobox. Это создает Div с элементом управления вводом над элементом управления выбора и скрывает элемент управления выбора.
Проверка нокаута запускается, когда я не выбираю значение в поле со списком и показывает сообщение об ошибке рядом с элементом управления, НО поле не выделено. Вот как это выглядит
Как видите, сообщение об ошибке появляется, но поле ввода не выделено.
Вот окончательный 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. Эти изменения тоже не сработали.
Странно то, что у меня также есть текстовое поле ввода текста, привязанное к другому свойству, которое использует аналогичный дизайн (пользовательская привязка для создания плагина ввода текста над элементом управления вводом), и проверка + выделение отлично работают на этом. Вот окончательный 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">
Может ли кто-нибудь сказать мне, если я пропускаю какие-либо дополнительные шаги. Я уверен, что вам может понадобиться больше деталей. Пожалуйста, оставьте комментарий, и я постараюсь добавить больше деталей.
Спасибо.
