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アノテーションを使用してバリデーションを実施しています。
フォームでエラーが発生した場合、エラーメッセージが表示されるようになっています。