hifiveのバリデーションを使いこなす

ユーザの入力値を検証するのはWebアプリケーションを開発する上で大事な機能です。従来はユーザの入力をサーバサイドで検証し、入力エラーがあれば再度フォームをエラーメッセージとともに表示するのが一般的でした。しかしこの場合、レンダリングにかかる時間であったり、入力を再現するのが面倒（特にファイル送信など）でした。

そこで最近ではJavaScriptを使った入力チェック（バリデーション）が使われるようになっています。もちろんサーバサイドでの入力チェックはこれまで通り必要ですが、まずJavaScript側でチェックをすることで、ユーザストレスを軽減したUXが提供できるようになります。

そこで今回はhifiveの提供する入力値検証ライブラリ、FormControllerの使い方を紹介します。

ベースとなるコントローラ

まず元になるコントローラのコードを紹介します。 .confirmをクリックすると入力値の検証を行うこととします。

ベースとなるHTMLについて

さらにベースとなるHTML（body内）は次のようになります。UIライブラリとしてBootstrapを読み込んでいます。

FormControllerを設定する

まず js/index.js に対してFormControllerを利用する設定を行います。

元：

修正後：

rootElementというのはバリデーション対象になるフォームのことです。今回はフォームが一つなので form としていますが、複数ある場合は id やクラス名で指定できます。

次に __ready 内で FormControllerの設定を行います。今回は個別の入力項目に対してエラー表示を行うstyleと、フォーム全体のエラーメッセージを表示するcompositionというプラグインを利用します。他にも

• bsBalloon
• message
• balloon

といったプラグインが用意されており、自分で新しいプラグインを作ることもできます。

そして、プラグインに関する設定を行います。

エラークラス名などはBootstrapのものを使うように指定しています。全体のエラーメッセージは .msg に対して表示するように指定しています。

バリデーションを実行する

バリデーションは確認ボタンを押したタイミングで実行します。

元：

修正後：

バリデーション自体は this._formController.validate() にて実行されます。その返却値としてオブジェクトが返ってきますので、その isValid を使ってバリデーション結果が確認できます。

バリデーションが失敗した場合は、 .msg を可視化しつつ、処理を完了しています。バリデーションが成功した場合は .msg を非表示にしています。

index.html の修正

続いて index.html を修正します。こちらでは入力項目に対してバリデーション条件を設定していきます。

元：

修正後：

このように data-required を追加するだけでstartTimeに対する必須チェックが追加されます。

同じように、

元：

修正後：

元：

修正後：

元：

修正後：

この報告欄については data-size も使っています。これによって10文字から200文字までの入力という制限を追加しています。

ラベルを日本語化する

ここまでの変更で試すと、エラーメッセージの一部が英語になっているのが分かるかと思います。

categoryは必須項目です
titleは必須項目です
commentは必須項目です

これでは見栄えがよくありませんので、 js/index.js の this._formController.setSetting に設定を追加します。

元：

修正後：

propertyを使って、各入力項目毎に displayName 設定を追加します。ここでラベルを設定してあげることで、入力エラーが

報告区分は必須項目です
タイトルは必須項目です
報告内容は必須項目です

といった具合に日本語化されます。

---

バリデーションのデモはこちらで試せます。確認ボタンをクリックするとエラーが表示されます。JavaScriptのコード自体はごく短く、設定しか記述していないのを確認してください。

バリデーションを使いこなし、よりユーザビリティの高いWebアプリケーションを目指してください！

入力値チェック（バリデーション） – hifive