Thymeleafの入力フォームの実装例

Thymeleafの入力フォームの実装例

Thymeleafでバリデーションを組み込んだ入力フォームの実装例を以下に示します。
SpringBootのバリデーション機能を利用します。

HTMLファイル (form.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>入力フォーム</title>
</head>
<body>
  <h1>入力フォーム</h1>
  <form th:action="@{/submit}" th:object="${user}" method="post">
    <div>
      <label for="name">名前:</label>
      <input type="text" id="name" th:field="*{name}" />
      <div th:if="${#fields.hasErrors('name')}" th:errors="*{name}">名前のエラー</div>
    </div>
    <div>
      <label for="email">メールアドレス:</label>
      <input type="email" id="email" th:field="*{email}" />
      <div th:if="${#fields.hasErrors('email')}" th:errors="*{email}">メールアドレスのエラー</div>
    </div>
    <div>
      <button type="submit">送信</button>
    </div>
  </form>
</body>
</html>

コントローラー (UserController.java)

import jakarta.validation.Valid;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class UserController {
  @GetMapping("/form")
  public String showForm(Model model) {
    model.addAttribute("user", new User());
    return "form";
  }

  @PostMapping("/submit")
  public String submitForm(@Valid @ModelAttribute User user, BindingResult bindingResult, Model model) {
    if (bindingResult.hasErrors()) {
      return "form";
    }
    model.addAttribute("user", user);
    return "result";
  }
}

エンティティ (User.java)

import jakarta.validation.constraints.Email;
import jakarta.validation.constraints.NotEmpty;

public class User {
  @NotEmpty(message = "名前は必須項目です")
  private String name;

  @NotEmpty(message = "メールアドレスは必須項目です")
  @Email(message = "有効なメールアドレスを入力してください")
  private String email;

  // ゲッターとセッター
  public String getName() {
    return name;
  }

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

  public String getEmail() {
    return email;
  }

  public void setEmail(String email) {
    this.email = email;
  }
}

結果表示ページ (result.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>結果</title>
</head>
<body>
  <h1>送信された情報</h1>
  <p>名前: <span th:text="${user.name}"></span></p>
  <p>メールアドレス: <span th:text="${user.email}"></span></p>
</body>
</html>

この例では、Userクラスにバリデーションアノテーションを追加し、コントローラーで@Validアノテーションを使用してバリデーションを実施しています。
フォームでエラーが発生した場合、エラーメッセージが表示されるようになっています。