活用編 第1回 : エラーメッセージを分岐させてみよう

活用編のサンプルファイル

　今回からは、バリデーターを中心にフォームをもっと使いこなすための活用編を進めていきます。活用編の第1回である今回は、バリデーターのエラーメッセージを改良します。その前に活用編のサンプルファイルを必要に応じてダウンロードしてください。

実習ファイル2

基礎編の終了時点のサンプルファイルを用意しています。必要な方はダウンロードして、任意のテーマの中に設置してください。

基礎編から進めていらっしゃる方は、基礎編で作成したサンプルファイルを元に、活用編のチュートリアルを進めていただけます。

エラーメッセージの分岐

2種類のエラーに1つのメッセージ？

サンプルファイルのform.htmlを開いてみましょう。[コメント]という入力項目には、必須属性( required )と、最大文字数( maxLength )のバリデーターが設定されています。

しかし、再入力画面( step#reapply )のエラーメッセージは、ひとつしか設定されていません。

<!-- BEGIN comment:validator --><p class="notice">コメントが入力されていないか、文字数制限を超えています</p><!-- END comment:validator -->

どの原因でエラーが表示されているのか、一見して分かりにくいエラーメッセージになってしまっています。

エラーにあわせてメッセージを変えてみよう

では、バリデーターによって表示されるエラーメッセージを分岐させてみましょう。先ほどのエラーメッセージの1行を、下のような2行のコードに書き換えてみてください。

メッセージ分岐のサンプルコード

<!-- BEGIN comment:validator#required --><p class="notice">コメントは必須項目です</p><!-- END comment:validator#required -->
<!-- BEGIN comment:validator#maxLength --><p class="notice">コメントは100文字以内にしてください</p><!-- END comment:validator#maxLength -->

書き換えたら、実際に動作を確認してみましょう。エラーの内容によって、表示されるメッセージが振り分けられたと思います。

<!-- BEGIN [対象の項目名]:validator#[オプション名] --><p>[エラーメッセージ]</p><!-- BEGIN [対象の項目名]:validator#[オプション名] -->

このようにエラーメッセージ用のブロックを書き換える事で、複数のバリデーターを設定した場合のエラーで、別々のメッセージを表示させることができます。

繰り返し入力による確認をつくってみる

パスワードやメールアドレスでよくある入力確認

基礎編と今回の内容を合わせた実習として、メールアドレスの項目を必須にし、さらに繰り返し入力による再確認のフォームを作ってみましょう。

このような項目を作成してみましょう。ある入力項目が、他の項目と同じであるかを確認するにはequalToというオプションを利用します。リファレンス - フォームオプションも参考にしてみてください。

サンプルコードを用意しました。実際に作成した記述と比べてみたり、うまくいかないときの参考にしてみてください。次回のチュートリアルでは、バリデーターを管理ページから設定する方法について解説を進めます。

実装例のサンプルコード

<dt>メールアドレス (必須)</dt>
<dd>
<input type="text" name="address" value="{address}" />
<input type="hidden" name="field[]" value="address" />
<input type="hidden" name="address:validator#email" />
<input type="hidden" name="address:validator#required" />
<input type="hidden" name="address:c" value="a" />
<!-- BEGIN address:validator#email --><p class="notice">メールアドレスの書式が正しくありません</p><!-- END address:validator#email -->
<!-- BEGIN address:validator#required --><p class="notice">メールアドレスは必須項目です</p><!-- END address:validator#required -->
</dd>
<dt>メールアドレス (再入力)</dt>
<dd>
<input type="text" name="addressConfirm" value="{addressConfirm}" />
<input type="hidden" name="field[]" value="addressConfirm" />
<input type="hidden" name="addressConfirm:validator#equalTo" value="address" />
<input type="hidden" name="addressConfirm:c" value="a" />
<!-- BEGIN addressConfirm:validator --><p class="notice">メールアドレスの再入力が一致しません</p><!-- END addressConfirm:validator -->
</dd>