Ajaxの非同期通信を使った検証機能を利用する
旧来のJavaWebアプリケーションの場合、検証機能は画面に表示されている入力項目全てに対してサーバサイドで行い、その結果を受けてもう一度再描画しなければならない場合や、JavaScriptを使ったクライアントサイドの入力チェック機能を作成する必要がありました。いずれにせよ結構な手間が必要になりますが、JSF2のAjax利用をした検証機能はそういった手間から解放され、また複雑なJavaScriptやコードを追記することもありません。JavaEEコンテナが自動的に必要なコードを内部で生成し、非同期通信の部分も機能提供します。実装したManagedBeanやFaceletsに対して特殊なコードが付加されることもありません。
利用の方法はいたって簡単で、検証機能をつけた入力コンポーネントに対して、<f:ajax>タグを子要素に持たせるだけです。
<h:inputSecret id="password" value="#{user.password}"
validatorMessage="パスワードは5～16文字の間で入力してください">
<f:validateLength minimum="5" maximum="16"/>
<f:ajax render="passwordError" event="blur"/> … （1）
</h:inputSecret>
<h:message for="password" id="passwordError" style="color: red"/>
先ほどのパスワードのチェックに対して、（1）の<f:ajax>1行を追加するのみです。render属性でメッセージの出力先のidを持つ<h:message>を指定します。さらにその入力項目に対してどの操作をしたときに動作するかをevent属性で定義します。eventに定義できる内容はJavaScriptで検出するonclickがclickに対応しており、XHTMLのイベント名称に由来しています（※注意）。
なお、定義できるイベントは1つの入力項目に対して1種類のみです。
| キーワード | イベントチェックするタイミング |
| blur | 入力項目に対してフォーカスがはずれた時 |
| change | プルダウンリストで利用される。入力値が変更された時 |
| click | 入力項目がクリックされた時 |
| dblclick | 入力項目がダブルクリックされた時 |
| focus | 入力項目がフォーカスされた時 |
| keydown | 入力項目上でキーボードのキーを押した時 |
| keypress | 入力項目上でキーボードのキーを押してから離した時 |
| keyup | 入力項目上でキーボードのキーを離した時 |
| mousedown | 対象項目上でマウスをクリックした時 |
| mousemove | 対象項目上でポインタが動いた時 |
| mouseout | 対象項目からポインタがはずれた時 |
| mouseover | 対象項目にポインタが入った時 |
| mouseup | 対象項目上でマウスをクリックして、離した時 |
| select | 入力項目内のテキストが選択された時 |
| valueChange | JSF独自イベント。指定した項目の値が変更されていた場合に実行される（ラジオボタンやチェックボックスに利用） |
XHTMLのイベント属性については、w3g.jpのイベント属性（イベントハンドラ）のページを参考にしてください。
今回のサンプルではテキスト入力した後、フォーカスがはずれたタイミングでチェックを行うblurを全ての入力項目に対して設定しています。これにより、入力項目に対して入力し終えて他の項目へ移った直後に入力値の検証を行い、その結果が即時表示されます。入力項目の多い画面では特に有効でしょう。他にも入力項目の即時検証で使われるのはkeypressで、これは項目に対して入力している最中に入力値の検証が行われます。用途に合わせてチェックするイベントを選択しましょう。
今回のサンプルアプリケーションは次のような画面になっています。入力項目として、ユーザID、パスワード、メールアドレス、年齢の4項目を用意し、それぞれに検証機能として、必須入力チェック、入力文字列の長さチェック、拡張された検証の利用などを盛り込んでいます。検証機能が動くタイミングは全てblurで統一しており、項目からフォーカスが離れたタイミングで動作するようにしています。
