Spring Boot チェック処理

Spring BootのWEB画面上でチェック処理を実装してみた(完成イメージ編)

今回は、以前作成した、入力画面・確認画面・完了画面の3画面を含み、HTMLオブジェクトとしてテキストボックス・セレクトボックス・ラジオボタン・チェックボックスを含むWEBアプリケーションにチェック処理を加えてみたので、そのサンプルプログラムを共有する。

様々なサイト上で、チェック処理のサンプルプログラムをいくつか見かけたが、チェックエラー時にフォームオブジェクトを赤反転させたり、form上のアノテーション以外での独自チェック処理を含むものが少なかったので、今回、そのサンプルプログラムを作成してみた。

なお、今回のサンプルプログラムは長くなるため、完成したサンプルプログラムの画面イメージとプロパティファイルの日本語許可設定のみ記載し、ソースコードの内容は次回の記事で掲載する。

前提条件

以下の記事の複数画面をもつSpring BootのWEB画面用アプリが作成済であること。

複数画面をもつSpring BootのWEBアプリケーションを作成してみた今回は、入力画面・確認画面・完了画面の3画面を含み、HTMLオブジェクトとしてテキストボックス・セレクトボックス・ラジオボタン・チェック...

 

やってみたこと

  1. 完成した画面イメージの共有
  2. プロパティファイルの日本語許可設定

 

完成した画面イメージの共有

ここでは、完成した画面イメージの共有を行う。

Spring Bootアプリケーションを起動し、「http:// (ホスト名):(ポート番号)」とアクセスした場合の初期表示は以下の通り
チェック処理を含むサンプルプログラムの実行結果1

そのままの状態で、「確認」ボタンを押下すると、以下のように、名前・性別・入力確認でエラーメッセージが表示され、エラー項目が赤反転する
チェック処理を含むサンプルプログラムの実行結果2

名前・性別・入力確認を入力し、「確認」ボタンを押下
チェック処理を含むサンプルプログラムの実行結果3

まだ生年月日を入力していないため、「生年月日_年」を入力するよう、エラーメッセージが表示される
チェック処理を含むサンプルプログラムの実行結果4

「生年月日_年」を入力し「確認」ボタンを押下すると、以下のように、「生年月日_月」を入力するよう、エラーメッセージが表示される
チェック処理を含むサンプルプログラムの実行結果5

「生年月日_月」を入力し「確認」ボタンを押下すると、以下のように、「生年月日_日」を入力するよう、エラーメッセージが表示される
チェック処理を含むサンプルプログラムの実行結果6

生年月日に存在しない日付を入力し「確認」ボタンを押下すると、生年月日が存在しない旨のエラーメッセージが表示される
チェック処理を含むサンプルプログラムの実行結果7

さらに、生年月日に未来の日付を入力し「確認」ボタンを押下すると、生年月日が未来日になっている旨のエラーメッセージが表示される(注:実行日は2019/10/22)
チェック処理を含むサンプルプログラムの実行結果8

生年月日に正しい日付を入力し「確認」ボタンを押下
チェック処理を含むサンプルプログラムの実行結果9

確認画面に遷移するので、ここで「戻る」ボタンを押下
チェック処理を含むサンプルプログラムの実行結果10

以下のように入力画面に戻り、エラーメッセージが表示されないことが確認できるので、「確認」ボタンを押下
チェック処理を含むサンプルプログラムの実行結果11

再度確認画面に遷移するので、次は「送信」ボタンを押下
チェック処理を含むサンプルプログラムの実行結果12

以下のように、完了画面に遷移する。
チェック処理を含むサンプルプログラムの実行結果13



フリーランスエンジニアのエージェントは就業中でも無料で登録できるITエンジニアには、フリーランスという働き方がある。フリーランスとは、会社や団体などに所属せず、仕事に応じて自由に契約する人のこ...

プロパティファイルの日本語許可設定

今回のサンプルプログラムでは、プロパティファイルにエラーメッセージを設定するが、そのままでは日本語のメッセージを利用できない。そこで、プロパティファイルの日本語許可設定を行う。その手順は以下の通り。

1) IntelliJ IDEAの「ファイル」メニューから「設定」を選択
プロパティファイルの日本語許可設定1

2) 「エディター」メニューから「ファイル・エンコーディング」を選択
プロパティファイルの日本語許可設定2

3) 「ネイティブコードからASCIIコードへの自動変換を行う」にチェックを入れ、「適用」ボタンを押下
プロパティファイルの日本語許可設定3

4) 「OK」ボタンを押下
プロパティファイルの日本語許可設定4

なお、サンプルプログラムの内容については、下記記事を参照のこと。

Spring BootのWEB画面上でチェック処理を実装してみた(ソースコード編)今回も、引き続きチェック処理を含むそのサンプルプログラムについて共有する。前回は、サンプルプログラムの完成イメージについて記載していたが...