Spring Boot Ajax/JavaScript連携

Spring BootでJavaScriptによるチェック処理を実装してみた

これまでは、Spring Bootによるチェック処理を利用してきたが、今回はJavaScriptによって同等のチェック処理を実装してみたので、そのサンプルプログラムを共有する。

前提条件

下記記事の実装が完了していること。

Spring BootでのSubmit処理をJavaScriptで実施してみたこれまでは、フォームと呼ばれるブロックの値を送信するSubmit処理をFormタグのaction属性で行っていたが、今回はJavaScr...



サンプルプログラムの作成

作成したサンプルプログラムの構成は以下の通り。
サンプルプログラムの構成
なお、上記の赤枠は、前提条件のプログラムから追加/変更したプログラムである。

input.htmlの内容は以下の通りで、「確認」ボタン押下時にcheckInputAndSubmit関数を呼び出すように修正している。

Code VillageはJavaScriptを中心としたサポート体制が充実したプログラミングスクールだったJavaScriptや、JavaScriptのフレームワーク「React」「Vue」を中心にオンラインで学習できるプログラミングスクール...

また、JavaScriptの内容は以下の通りで、checkInput関数で入力チェックを行い、エラーでない場合にサブミットする処理を実装している。

その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/java/tree/master/spring-boot-js-check/demo



サンプルプログラムの実行結果

サンプルプログラムの実行結果は、以下の通り。

1) Spring Bootアプリケーションを起動し、「http://(サーバー名):(ポート番号)/」とアクセスし、入力画面に遷移する。
サンプルプログラムの実行結果_1

2) 何も入力しない状態で「確認」ボタンを押下すると、「名前を入力してください。」というエラーメッセージが表示される。
サンプルプログラムの実行結果_2_1

サンプルプログラムの実行結果_2_2

3) エラーメッセージのダイアログで「OK」ボタンを押下すると「名前」にカーソルが設定される。
サンプルプログラムの実行結果_3_1

サンプルプログラムの実行結果_3_2

4) 名前に半角文字を入力すると、以下のように、「名前は全角で入力してください。」というエラーメッセージが表示される。
サンプルプログラムの実行結果_4_1

サンプルプログラムの実行結果_4_2
「AOMEI Partition Assistant Standard(無料)版」は便利なパーティション管理ツールだったハードディスクの記憶領域を論理的に分割し、分割された個々の領域のことを、パーティションといいます。 例えば、以下の図の場合、C/D...

5) 名前に全角文字を入力し、生年月日を入力せず「確認」ボタンを押下すると、「生年月日を入力してください。」というエラーメッセージが表示される。
サンプルプログラムの実行結果_5_1

サンプルプログラムの実行結果_5_2

6) 生年月日に不正な日付を入力し「確認」ボタンを押下すると、「生年月日を入力してください。」というエラーメッセージが表示される。
サンプルプログラムの実行結果_6_1

サンプルプログラムの実行結果_6_2

7) 生年月日に未来の日付を入力し「確認」ボタンを押下すると、「生年月日が未来の日付になっています。」というエラーメッセージが表示される。
サンプルプログラムの実行結果_7_1

サンプルプログラムの実行結果_7_2
「FlexClip」はテンプレートとして利用できる動画・画像・音楽などが充実した動画編集ツールだったテンプレートとして利用できるテキスト・動画・画像・音楽など(いずれも著作権フリー)が充実している動画編集ツールの一つに、「FlexCli...

8) 名前・生年月日を入力し、性別を入力せず「確認」ボタンを押下すると、「性別を入力してください。」というエラーメッセージが表示される。
サンプルプログラムの実行結果_8_1

サンプルプログラムの実行結果_8_2

9) 名前・生年月日・性別を入力し、入力確認チェックを入力せず「確認」ボタンを押下すると、「確認チェックを入力してください。」というエラーメッセージが表示される。
サンプルプログラムの実行結果_9_1

サンプルプログラムの実行結果_9_2

10) チェックエラーにならない状態で「確認」ボタンを押下すると、確認画面に遷移する。
サンプルプログラムの実行結果_10_1

サンプルプログラムの実行結果_10_2

要点まとめ

  • Spring Bootによるチェック処理と同等の処理は、JavaScriptによっても実装することができる。