0

Bootstrap Combobox Pluginと組み合わせて Knockout Validation を使用しようとしています。

必要な属性 (KO 検証用) を持つ観察可能なプロパティにバインドされた選択コントロールがあります。

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

選択コントロールに関連付けられたカスタム バインディングがあり、基本的に Bootstrap Combobox Plugin を呼び出すだけです。これにより、選択コントロールの上に入力コントロールを持つ 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>

ご覧のとおり、選択コントロール (プラグインによって隠されていました) は、私が定義した検証エラー クラス ('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">

追加の手順が不足しているかどうか教えてください。詳細が必要になると思います。コメントを残してください。詳細を追加しようとします。

ありがとう。

4

1 に答える 1