SpringBoot フォームで入力チェック(バリデーション)

Spring Bootでフォームで入力チェックするサンプルです。
(確認環境:Spring Boot 2.5,JDK 11,thymeleaf 3)

目次

サンプル 入力チェックする流れ(バリデーション) / pom.xml
  値を送信する側のファイル(index.html)
  コントローラのクラス(MainController.java)
  フォームのクラス(Test1Form.java)
  実行して確認する

入力チェックする流れ(バリデーション)

流れ

1.index.html・・・画面でテキストを入力しsubmitを行って値を送信します。
2.MainController.java・・・コントローラで受信し@Validatedで入力チェックの対象になります。
3.Test1Form.java・・・項目に追加した@NotNullアノテーション等で入力チェックします。
4.testform.html・・・入力チェックを通ったときに表示されます。

githubにコードがあります。
https://github.com/ut23405/springboot/tree/master/springboot-validation

pom.xml

必要なライブラリです。spring-boot-starter-validationは、入力チェックで使用します。

        <dependency>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-starter-validation</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-web</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" th:action="@{/test1/inputCheck}" th:object="${test1Form}">
	<p><input type="text" th:field="*{id}"/></p>
	<div th:if="${#fields.hasErrors('id')}" th:errors="*{id}"></div>

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

9行目は、formです。th:object=のtest1Formは、コントローラの値とひも付きます。
10,13,16行目は、テキストボックスです。
11,14,17行目は、入力チェックでエラーがあった場合にメッセージが表示されます。
th:ifとあります。if文です。
18行目は、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.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

@Controller
@RequestMapping("/test1")
public class MainController {

	@GetMapping("/login")
	public String disp1(Model model) {
		
		if (!model.containsAttribute("test1Form")) {
			model.addAttribute("test1Form", new Test1Form());
		}
		return "test1/index";
	}

	@PostMapping("/inputCheck")
	public String disp2(
			@ModelAttribute("test1Form") @Validated Test1Form test1Form, 
			BindingResult br, 
			RedirectAttributes redirectAttributes) {
		if (br.hasErrors()) {
			redirectAttributes.addFlashAttribute("org.springframework.validation.BindingResult.test1Form", br);
			redirectAttributes.addFlashAttribute("test1Form", test1Form);
			return "redirect:login";
		}
		return "test1/testform";
	}
}

21行目は、初期画面表示時に実行されます。
この1行が無い場合、ビューでマッピングできずエラーになります。
28行目は画面の値がTest1Formにセットされ、@Validatedで入力チェックが行われます。
以下のようにも書けます。
@ModelAttribute @Validated Test1Form test1Form
31行目は、入力チェックでエラーがあった場合にtrueになります。
32,33行目は、エラー文字列と入力文字列をredirect先に渡します。
34行目は、redirectで18行目が実行されます。
redirect先では、32,33行目のbrやtest1FormのaddAttributeへの追加をしなくても
画面(index.html)に渡されます。

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

フォームのクラスです。

package com.example.demo;

import javax.validation.constraints.NotBlank;
import javax.validation.constraints.Pattern;
import javax.validation.constraints.Size;

public class Test1Form {

	@Pattern(regexp = "^[0-9]+$", message = "数値を入力してください")
	private String id;

	@Size(min = 3, max = 6, message = "3文字から6文字で入力して下さい")
	private String name;
	
	@NotBlank(message="必須項目です")
	@Size(max=5,message = "最大5文字までです")
	private String romaji;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getRomaji() {
		return romaji;
	}

	public void setRomaji(String romaji) {
		this.romaji = romaji;
	}
}

9行目は、数値でない場合、エラーメッセージを表示します。
12行目は、指定の文字数でない場合、エラーメッセージを表示します。
15行目は、項目が未入力の場合、エラーメッセージを表示します。

null 空文字("") 半角スペース
NotNull エラーになる ok ok
NotEmpty エラーになる エラーになる ok
NotBlank エラーになる エラーになる エラーになる

値を受け取る側のファイル(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と出力されます。

実行して確認する

起動してブラウザに以下のURLを入力するとindex.htmlが画面に表示されます。

http://localhost:8765/test1/login

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

2.送信ボタンを押しエラーになるとフォームのクラスで設定したメッセージが表示されます。

3.入力値がOKの場合、testform.htmlの画面が表示されます。

関連の記事

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

△上に戻る