SpringBootで空文字入力のValidationを実装したい

Question

前提・実現したいこと

SpringBootで簡易的なTodoリスト作成アプリを制作しております。
Todoの名前を空文字で入力するのを防ぐために、
バリデーションを実装し、入力フォームでエラーメッセージを表示させたいのですが、
正常に表示されません。。

皆様の知見をお借りできればと思っております。

発生している問題

空文字入力が行われた場合、Controllerでの条件分岐で
エラーメッセージを表示させ、returnで同様のメッセージ付きページを返したいのですが、
ページがリロードされるだけで、エラーメッセージが表示されません

現時点では、空文字入力でもDBに登録はされないので、バリデーション自体は機能しているとは思うのですが、
エラーメッセージの受け渡しがうまくいってないものと考えています。。

該当のソースコード

package com.teamlab.engineering.todo.Form;

import javax.validation.constraints.NotBlank;

public class TodoForm {

  @NotBlank(message = "ToDo名を入力してください")
  String notBlanktitle;

  public String getNotBlanktitle() {
    return notBlanktitle;
  }

  public void setNotBlanktitle(String notBlanktitle) {
    this.notBlanktitle = notBlanktitle;
  }
}

package com.teamlab.engineering.todo.controller;

import com.teamlab.engineering.todo.Form.TodoForm;
import com.teamlab.engineering.todo.model.Todo;
import com.teamlab.engineering.todo.service.TodoService;
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.*;

import java.util.List;

@Controller
public class TodoController {

  private final TodoService todoService;

  public TodoController(TodoService todoService) {
    this.todoService = todoService;
  }

  @GetMapping("/")
  public String index(Model model) {
    List<Todo> todolist = todoService.findAll();
    model.addAttribute("list", todolist);
    return "index";
  }

  @PostMapping("/register")
  public String register(
      @Validated TodoForm todoForm, BindingResult error, @ModelAttribute Todo todo) {
    if (error.hasErrors()) {
      return "redirect:/";
    }
    todoService.save(todo);
    return "redirect:/";
  }

 <div class="left_box">
     <p>新しい ToDoを作成する</p>
        <form th:method="post" th:action="@{/register}" class="new-todo">
           <div class="todo-name">
              ToDo名<input type="text" name="title" size="50" maxlength="20" class="text-input">
               <span th:if="${notBlanktitle}" th:each="error : ${notBlanktitle}" th:text="${message}">ErrorMessage</span>
           </div>
           <div class="todo-deadline">
                 期限<input type="date" name="deadline" class="date-input">
            </div>
            <input type="submit" value="送信する" class="todo-create">
        </form>
 </div>

試したこと

条件分岐のエラーが　出た際に、
redirectだとそのままデータが返されてしまうので、
returnで、そのままページ遷移させなければならないという指摘があったので
redirectに変更したもののそのままページ遷移させてしまうだけでした

おそらくhtml側にメッセージが渡せていないので、
コントローラ側で addAttributeを使用してメッセージを渡す必要があるのかと思ったのですが
当てる変数が分からず。。

thymeleafの使い方もまだ曖昧なので、html周りが原因ではないかと考えております。。

補足情報

今週からSpringを使い始めたため、
まだまだ知識不足な部分が多いのですが、もし原因となりそうか箇所
がありましたら、ご教授頂ければ幸いです。。

何卒よろしくお願い致します。

Answer 1

現時点では、空文字入力でもDBに登録はされないので、バリデーション自体は機能しているとは思うのですが、

エラーメッセージの受け渡しがうまくいってないものと考えています。。

機能しない原因はいくつかありましたが、主なものは以下の2つだと思います。

1. 入力エラー時にリダイレクトしている点。リダイレクトすると入力エラーが消えてしまいます。
2. テンプレートファイルの入力フォームとTodoFormクラスがマッピングされていない点。

以下に動作確認したコードを記載しますので参考にしてください。

TodoForm.java

フォームクラスはテンプレートファイルのformタグにあわせて実装することが一般的です。
index.htmlのformではinput要素にnotBlanktitleとdeadlineがあったので、deadlineをフィールドに追加しました。

import java.time.LocalDate;

import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;

import org.springframework.format.annotation.DateTimeFormat;

public class TodoForm {

	@NotBlank(message = "ToDo名を入力してください")
	String notBlanktitle;

	@NotNull(message = "期限を入力してください")
	@DateTimeFormat(pattern = "yyyy-MM-dd")
	LocalDate deadline;

	public String getNotBlanktitle() {
		return notBlanktitle;
	}

	public void setNotBlanktitle(String notBlanktitle) {
		this.notBlanktitle = notBlanktitle;
	}

	public LocalDate getDeadline() {
		return deadline;
	}

	public void setDeadline(LocalDate deadline) {
		this.deadline = deadline;
	}

	@Override
	public String toString() {
		return "TodoForm [notBlanktitle=" + notBlanktitle + ", deadline=" + deadline + "]";
	}

}

TodoController.java

コントローラの変更点は以下の通りです。

(1)indexの引数にTodoFormも取るようにします。これは入力エラーのときにこのメソッドに処理が戻されるためです。こうしておくと直前の入力値をフォームにセットすることができます。

public String index(Model model) {

↓

public String index(TodoForm todoForm, Model model) {

(2) フォームからポストされたデータはTodoFormで受けるので、不要なTodoは削除します。

public String register(@Validated TodoForm todoForm, BindingResult error, @ModelAttribute Todo todo) {

↓

public String register(@Validated TodoForm todoForm, BindingResult result, Model model) {

(3) 入力エラーがあった場合にindexへ処理を戻しますが、このときリダイレクトすると入力エラーの情報が消えてしまいます。
なので直接遷移するビューを指定します。

return "redirect:/";

↓

return "index";

なお、以下のようにindexメソッドを呼んでreturnするという方法もあります。

return index(todoForm, model);

(4) フォームから入力されたデータはTodoFormに入っているので、入力エラーがなければTodoFormからデータベースに保存するためにエンティティへデータを変換します。

↓

Todo todo = from(todoForm);

コード全体

public class TodoController {

	@GetMapping("/")
	// (1)
	public String index(TodoForm todoForm, Model model) {
		List<Todo> todolist = todoService.findAll();
		model.addAttribute("result", todolist);
		return "index";
	}

	@PostMapping("/register")
	// (2)
	public String register(@Validated TodoForm todoForm, BindingResult result, Model model) {
		if (result.hasErrors()) {
			// (3)
			return "index";
			// return index(todoForm, model);
		}
		// (4)
		Todo todo = from(todoForm);
		todoService.save(todo);
		return "redirect:/";
	}

	private Todo from(TodoForm todoForm) {
		Todo todo = new Todo();
		todo.setTitle(todoForm.getNotBlanktitle());
		todo.setDeadline(todoForm.getDeadline());
		todo.setStatus(false);
		todo.setCreateTime(LocalDateTime.now());
		todo.setUpdateTime(LocalDateTime.now());
		return todo;
	}

}

index.html

テンプレートファイルの変更点は以下の通りです。Spring BootとThymeleafを使ったフォームの組み立てでの、ほぼ定型的なコードになります。

(1) th:objectでフォームクラスのインスタンスを指定します。（定型）

<form th:method="post" th:action="@{/register}" class="new-todo">

↓

<form th:method="post" th:action="@{/register}" th:object="${todoForm}" class="new-todo">

(2) 各input要素ではth:fieldでTodoFormクラスのフィールド名を指定します。（定型）
th:fieldを使うとテンプレートファイルがレンダリングされたときにidとname属性が設定されます。(chromeのdevtoolsでご確認ください）

ToDo名<input type="text" name="title" size="50" maxlength="20" class="text-input">

↓

ToDo名<input type="text" th:field="*{notBlanktitle}" size="50" maxlength="20" class="text-input">

(3) 入力エラーがあった場合のコードは#fields.hasErrorsとth:errorsを使用します。（定型）

<span th:if="${notBlanktitle}" th:each="error : ${notBlanktitle}" th:text="${message}">ErrorMessage</span>

↓

<span th:if="${#fields.hasErrors('*{notBlanktitle}')}" th:errors="*{notBlanktitle}">ErrorMessage</span>

コード全体

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>TO DOアプリ</title>
</head>
<body>
	<div class="left_box">
		<p>新しい ToDoを作成する</p>
		<!-- (1) -->
		<form th:method="post" th:action="@{/register}" th:object="${todoForm}" class="new-todo">
			<div class="todo-name">
				<!-- (2) -->
				ToDo名<input type="text" th:field="*{notBlanktitle}" size="50" maxlength="20" class="text-input">
				<!-- (3) -->
				<span th:if="${#fields.hasErrors('*{notBlanktitle}')}" th:errors="*{notBlanktitle}">ErrorMessage</span>
			</div>
			<div class="todo-deadline">
				期限<input type="date" th:field="*{deadline}" class="date-input">
				<span th:if="${#fields.hasErrors('*{deadline}')}" th:errors="*{deadline}">ErrorMessage</span>
			</div>
			<input type="submit" value="送信する" class="todo-create">
		</form>
	</div>
</body>
</html>

Comments

[KOTAITO]

rubytomatoさん

繰り返しご回答頂きありがとうございます！

具体的なコードの提示、動作確認までして頂き、頭が上がりません。。

上記の正しいコードと照らし合わせてもみても
Javaのクラス間の値を受け渡しの流れがまだ曖昧だったようなので、改めて勉強します！！

引数として、前回のデータが持ってこれていなかった流れなども確認することができました。。
ありがとうございました！！