フォームの内容を自動的に設定する
上記の例では、入力値のエラーが発生した場合に、正しい値が入力されていたとしても、すべての値を再入力させる必要がありました。
次の例では、入力値エラーが発生していた場合には入力フィールドに自動的に値を再設定する方法を紹介します。
CatalystのプラグインではCatalyst::Plugin::FillInFormによって実現されます。
FillInFormプラグインは通常はFormValidatorと一緒に使用されることで、ユーザーにより快適な使い勝手を提供できます。
FillInFormをインストール/設定する
FormValidatorに続いて、Catalyst::Plugin::FillInFormプラグインをインストールしましょう。
# perl -MCPAN -e 'install Catalyst::Plugin::FillInForm'
Catalyst::Plugin::FillInFormプラグインの設定も先ほどと同様にアプリケーションモジュールファイルに登録します。
# 省略 use Catalyst qw/ -Debug ConfigLoader Static::Simple FormValidator::Simple FillInForm Unicode::Encoding /;
入力値を自動的に設定する処理を実装する
先ほどの例に追加する形で、FormValidatorにFillInFormを組み込んだ場合の例を紹介します。
この例では入力から確認までの流れを実現するために、次のようなアクションやテンプレートを使用します。
種類 | 説明 |
input2アクション | 入力チェックを行うアクション |
complete2アクション | 実際に登録処理を行うアクション |
input2.tt | 入力2テンプレート |
confirm2.tt | 登録確認用テンプレート |
complete2.tt | 登録完了ページ用テンプレート |
messages.yml | エラーメッセージ定義ファイル(input1の場合と同様) |
input2アクションでは、入力値チェックと確認ページの表示を行います。そしてcomplete2アクションでは値の保存を行います(今回は省略しています)。それぞれの段階においてテンプレートファイルを作成しています。
エラーメッセージファイルはinput1の場合と同様になっています。
input2アクションは、input1とほぼ同じですが、入力値エラーが発生した場合にFillInFormでパラメータの値をフォームに設定する処理が追加されています。
sub input2 :Local { my ( $self, $c ) = @_; if ($c->req->method eq 'POST') { $c->form( name => ['NOT_BLANK', ['JLENGTH', 2, 10]], name_kana => ['NOT_BLANK', 'KATAKANA', ['JLENGTH', 2, 30]], zip => ['NOT_BLANK', 'ZIP_JP'], phone => ['NOT_BLANK', 'NUMBER_PHONE_JP'], email => ['EMAIL_MOBILE_JP'], ); if ($c->form->has_error) { # (1)入力値エラーが発生していた場合 $c->fillform; } else { # (2)入力値チェックにすべてパスした場合 $c->stash->{template} = 'confirm2.tt'; } } } sub complete2 :Local { my ( $self, $c ) = @_; # 入力データを保存する }
(1)入力値エラーが発生した場合の処理
入力値エラーが発生したかどうかは、$c->form->has_errorにより判定できるので、この例ではFillInFormプラグインによってコンテキストに追加されたfillformメソッドを使用してフォームにパラメータの値を設定しています。
この例のように引数に何も指定しない場合には、自動的に$c->req->parametersが設定されます。
(2)入力値チェックにすべてパスした場合
入力値チェックにパスした場合には、confirm2.ttテンプレートを指定し、ユーザーの判断を仰いだうえでcomplete2アクションに遷移するようにしています。
実行例
このFillInFormとFormValidatorを使用したサンプルを実行してみましょう。次のURLをブラウザで表示させます。
http://<ホスト名またはIPアドレス><:Port>/input2
今回は、不正な入力値を設定して登録を実行してみます。先ほどは入力フィールドには値が設定されていませんでしたが、今回の例では、入力フィールドにはSubmit前に設定した値が入力されていることが確認できます。
それぞれの入力フィールドにさまざまな値を入力して、どのような結果が表示されるかを試してみてください。
まとめ
本記事では、フォーム処理を実装するのに役立つ、フォームのパラメータ検証、フォームのパラメータに値を自動的に設定するプラグインについて紹介しました。
次回は、今回は触れられなかった複数フォームにまたがった一連のトランザクションを実現するためのコントローラモジュールや、小粒ですがちょっとした作業などを便利にしてくれるプラグインなどを紹介します。