今回は、以前作成した、入力画面・確認画面・完了画面の3画面を含み、HTMLオブジェクトとしてテキストボックス・セレクトボックス・ラジオボタン・チェックボックスを含むWEBアプリケーションにチェック処理を加えてみたので、そのサンプルプログラムを共有する。
様々なサイト上で、チェック処理のサンプルプログラムをいくつか見かけたが、チェックエラー時にフォームオブジェクトを赤反転させたり、form上のアノテーション以外での独自チェック処理を含むものが少なかったので、今回、そのサンプルプログラムを作成してみた。
なお、今回のサンプルプログラムは長くなるため、完成したサンプルプログラムの画面イメージとプロパティファイルの日本語許可設定のみ記載し、ソースコードの内容は次回の記事で掲載する。
前提条件
以下の記事の複数画面をもつSpring BootのWEB画面用アプリが作成済であること。
やってみたこと
完成した画面イメージの共有
ここでは、完成した画面イメージの共有を行う。
Spring Bootアプリケーションを起動し、「http:// (ホスト名):(ポート番号)」とアクセスした場合の初期表示は以下の通り
そのままの状態で、「確認」ボタンを押下すると、以下のように、名前・性別・入力確認でエラーメッセージが表示され、エラー項目が赤反転する
名前・性別・入力確認を入力し、「確認」ボタンを押下
まだ生年月日を入力していないため、「生年月日_年」を入力するよう、エラーメッセージが表示される
「生年月日_年」を入力し「確認」ボタンを押下すると、以下のように、「生年月日_月」を入力するよう、エラーメッセージが表示される
「生年月日_月」を入力し「確認」ボタンを押下すると、以下のように、「生年月日_日」を入力するよう、エラーメッセージが表示される
生年月日に存在しない日付を入力し「確認」ボタンを押下すると、生年月日が存在しない旨のエラーメッセージが表示される
さらに、生年月日に未来の日付を入力し「確認」ボタンを押下すると、生年月日が未来日になっている旨のエラーメッセージが表示される（注：実行日は2019/10/22）
生年月日に正しい日付を入力し「確認」ボタンを押下
確認画面に遷移するので、ここで「戻る」ボタンを押下
以下のように入力画面に戻り、エラーメッセージが表示されないことが確認できるので、「確認」ボタンを押下
再度確認画面に遷移するので、次は「送信」ボタンを押下
以下のように、完了画面に遷移する。
プロパティファイルの日本語許可設定
今回のサンプルプログラムでは、プロパティファイルにエラーメッセージを設定するが、そのままでは日本語のメッセージを利用できない。そこで、プロパティファイルの日本語許可設定を行う。その手順は以下の通り。
1) IntelliJ IDEAの「ファイル」メニューから「設定」を選択
2) 「エディター」メニューから「ファイル・エンコーディング」を選択
3) 「ネイティブコードからASCIIコードへの自動変換を行う」にチェックを入れ、「適用」ボタンを押下
4) 「OK」ボタンを押下
なお、サンプルプログラムの内容については、下記記事を参照のこと。
