SpringBoot フォームの値を入力チェック

Spring Bootでフォームの値を入力チェックするサンプルです。

確認環境
・Spring Boot 2.3.3
・JDK 11.0.2
・STS 4.7.2

目次

サンプル 環境
  値を送信する側のファイル(index.html)
  コントローラのクラス(MainController.java)
  フォームのクラス(Test1Form.java)
  実行結果

環境

テンプレートエンジンは、Thymeleaf(タイムリーフ)です。

説明用として以下4つのファイルがあります。
1.index.html・・・画面でテキストを入力しsubmitを行って値を送信します。
2.MainController.java・・・コントローラです。アクセスするURLに従って処理を行います。
3.Test1Form.java・・・画面のフォームの値を受け取り入力チェックします。
4.testform.html・・・入力チェックを通ったときに表示されます。

以下は、pom.xml(一部分)です。dependencyにspring-boot-starter-validationを追加しています。

        <dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
        <dependency>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>

値を送信する側のファイル(index.html)

値を送信する側のファイルです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>check</title>
</head>
<body >
<form method="post" action="#" th:action="@{/test1/testform}" th:object="${test1Form}">

<p><input type="text" id="id" name="id"  th:field="*{id}"/></p>
<div th:if="${#fields.hasErrors('id')}" th:errors="*{id}"></div>

<p><input type="text" id="name" name="name" th:field="*{name}"></p>
<div th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></div>
<p><input type="submit" value="送信ボタン"></p>
</form>
</body>
</html>

8行目は、formです。th:object=のtest1Formは、コントローラの値とひも付きます。
10,13行目は、テキストボックスです。
11,14行目は、入力チェックでエラーがあった場合にメッセージが表示されます。
th:ifとあります。if文です。
14行目は、submitボタンです。

コントローラのクラス(MainController.java)

コントローラのクラスです。

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/test1")
public class MainController {
	
    @GetMapping("/")
    public String disp1(
    		Model model) {
    	model.addAttribute("test1Form", new Test1Form());
        return "test1/index";
    }
    @PostMapping("/testform")
	public String disp2(@Validated Test1Form test1Form
			,BindingResult br) {
		        if (br.hasErrors()) {
		        	return "test1/index";
		        }
			return "test1/testform";
		}
}

17行目のtest1Formはnewでインスタンス化しています。
index.htmlの8行目のtest1Formとひも付きます。
この1行が無い場合、ビューでマッピングできずエラーになります。
21行目は、@Validatedで入力チェックが行われます。
23行目は、入力チェックの結果でエラーがある場合は、trueになり初期画面に遷移します。
エラーが無い場合は、26行目で別画面に遷移します。

フォームのクラス(Test1Form.java)

フォームのクラスです。

package com.example.demo;

import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

public class Test1Form {
	@NotNull(message="必須項目です")
	private Integer id;
	
	@Size(min=3, max=6,message="3文字から6文字で入力して下さい")
	private String name;

	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

7,8行目は、idの項目が未入力の場合、エラーメッセージを表示します。
10,11行目は、指定の文字数でない場合、エラーメッセージを表示します。
13~24行目は、ゲッターとセッターです。

値を受け取る側のファイル(testform.html)

値を受け取る側のファイルです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>submit</title>
</head>
<body >
<p >OK</p>
</body>
</html>

画面表示時は、OKと出力されます。

実行結果

1.画面初期表示時です。

2.何も入力せずに送信ボタンを押すと設定したメッセージが表示されます。

関連の記事

SpringBoot フォームの値を別画面に渡す

△上に戻る