knockout-validationでBootstrapのform-groupにhas-errorを付ける のバックアップ差分(No.1)
更新- バックアップ一覧
- 現在との差分 を表示
- ソース を表示
- バックアップ を表示
- プログラミング/JavaScript/knockout-validationでBootstrapのform-groupにhas-errorを付ける へ行く。
- 追加された行はこの色です。
- 削除された行はこの色です。
[[公開メモ]] * knockout-validation の decorateInputElement [#y1323cd0] [[knockoutjs>http://knockoutjs.com]] + [[knockout-validation>https://github.com/Knockout-Contrib/Knockout-Validation]] を使うと、フォームのフィールドへの入力値をリアルタイムに検証し、その結果をユーザーにフィードバックする動的フォームをかなり容易に作成できます。 特に、knockout-validation に decorateInputElement: true を与えると、エラーのある input に validationElement クラスを付与できるため、border-colorを変えるなどしてエラー箇所を分かりやすく表示できます。(このオプション、以前は decolateElement と呼ばれていたのですが、[[名前が変わったそうです>(https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Configuration]]) * Bootstrap との組み合わせ [#e33bf77e] ところがこれを [[Bootstrap>http://getbootstrap.com/]] と組み合わせようとすると、ちょっと困ったことになります。 なぜなら Bootstrap ではエラーのあるコントロールの表示を変えるのに input 自身ではなくそれを囲む div.form-group に has-error というクラスを指定しなければならないためです。 knockout-validation では errorElementClass というオプションで、エラーのあるコントロールに付与するクラス名を指定できますが、コントロールを囲む div.form-group にクラスを追加するという機能はないようです。 * そこで [#p94af267] 面倒ですが、コントロールの parentNode をたどり、.form-group にマッチするものに has-error を追加するコードを以下のように書きました。 LANG:javascript(linenumber) // 要素の親のうち form-group であり、なおかつエラー要素を含むものに // config.errorParentClass クラスを指定する var original_handler = ko.bindingHandlers.validationElement.update; ko.bindingHandlers.validationElement.update = function (element, valueAccessor, allBindingsAccessor) { original_handler(element, valueAccessor, allBindingsAccessor); var config = ko.validation.utils.getConfigOptions(element); var group = $(element).parents('.form-group'); group.toggleClass( 'has-error', group.find("."+config.errorElementClass).length > 0 ); }; 1つの form-group に複数のコントロールが含まれる場合、1つでもエラーになるものがあれば has-error となるようにしてあります。 * jsfiddle で確かめられます [#g06a9315] 上記のコードは以下の jsfiddle で確かめられます。 http://jsfiddle.net/6B332/1/ * この記事は Qiita にも投稿しました [#i7f884cc] * コメント [#w297d210] #article_kcaptcha
Counter: 7122 (from 2010/06/03),
today: 3,
yesterday: 0