hifiveとjQuery UIを組み合わせる【バリデーション】
hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。
今回はバリデーションです。
デモコードについて
実際に動作するデモはJSFiddleにアップロードしてあります。入力して送信ボタンを押すとバリデーションが実行されます。
HTMLについて
HTMLは次のようになります。通常のHTMLと変わりません。
CSSについて
CSSはエラー時の色をつけるクラスなどを追加しています。
JavaScriptについて
JavaScriptは長いので、幾つかに分けて紹介します。まず、hifiveのコントローラ化が完了した際の__readyイベントにてバリデーションの設定を行います。
この際、入力チェックを行う際などのイベントハンドラも設定もします。this.ownWithOrgを使うことでhifiveのコントローラ自身を渡せるようになります。
後は各イベントハンドラの実装になります。
最後にチェックボックス、ラジオボタンのバリデーションについて別途実装します。
hifiveでもvalidation機能を提供していますが、使い慣れた方を採用するケースもあるでしょう。そうした時にはコールバックの管理などはhifiveで行うことで、よりメンテナンスしやすいバリデーション実装ができるようになります。
実際に動作するデモはJSFiddleにアップロードしてあります。お試しください。
コメントは受け付けていません。