httrhtm
@httrhtm (hattori hitomi)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

[SpringBoot] バリデーションのエラーメッセージの出力方法を教えてください!

解決したいこと

SpringBootで問題と答えの登録機能を作成しています。
問題と答えの入力値をアノテーション(@NotBlank, @Sizeなど)を使用してバリデーションチェックを行い、正しく入力されなかった場合は入力画面に戻り、エラーメッセージを表示する処理を実装したいです。
Image from Gyazo

発生している問題・エラー

バリデーションは効いていて、空文字入力をしたり、文字数制限を超えたりした場合は入力画面に戻され、正しく入力された場合は確認画面への遷移が行われますが、エラーメッセージが表示されない状態です。

該当するソースコード

RegisterForm.java
package com.example.campus.form;

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

public class RegisterForm {

    @NotBlank(message="問題を入力してください")
    @Size(max=500, message="問題は500文字以内で入力してください")
    private String question;

    @NotBlank(message="答えを入力してください")
    @Size(max=200, message="答えは200文字以内で入力してください")
    private String answer;

    public String getQuestion() {
        return question;
    }
    public void setQuestion(String question) {
        this.question = question;
    }
    public String getAnswer() {
        return answer;
    }
    public void setAnswer(String answer) {
        this.answer = answer;
    }
}

RegisterController.java
package com.example.campus.controller;

import org.springframework.beans.factory.annotation.Autowired;
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.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.campus.entity.Answers;
import com.example.campus.entity.Questions;
import com.example.campus.form.RegisterForm;
import com.example.campus.service.AnswerService;
import com.example.campus.service.QuestionService;

@Controller
public class RegisterController {

    @Autowired
    private QuestionService questionService;
    @Autowired
    private AnswerService answerService;

    /**
     * 登録画面に遷移する
     * @return 登録画面へのパス
     */
    @RequestMapping("/register")
    public String register(RegisterForm registerForm) {
        return "register";
    }

    /**
     * 確認画面に遷移する
     * @return 確認画面へのパス
     */
    @PostMapping("/confirm")
    public String confirm(
            @Validated @ModelAttribute RegisterForm registerForm, BindingResult result,
            Model model) {

        // 入力チェックに引っかかった場合、登録画面に戻る
        if (result.hasErrors()) {
            return "register";
        }

        model.addAttribute("registerForm", registerForm);
        return "confirm";
    }

register.html
<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>register</title>
</head>
<body>
    <!-- nav -->
    <div class="nav">
        <form method="post" th:action="@{/top}" style="display: inline">
            <input type="submit" value="top" />
        </form>
        <form method="post" th:action="@{/logout}" style="display: inline">
            <input type="submit" value="logout" />
        </form>
    </div>

    <!-- form -->
    <form th:method="POST" th:action="@{/confirm}" th:object="${registerForm}">
        <!-- 問題 -->
        <div class ="question">
            問題: <input type="text" name="question" th:field="*{question}" />
        <p th:if="${#fields.hasErrors('question')}">問題を入力してください</p>
        </div>

        <!-- 答え -->
        <div class="answer">
            答え: <input type="text" name="answer" th:field="*{answer}" />
        <p th:if="${#fields.hasErrors('answer')}">答えを入力してください</p>
            <!-- 削除(未実装) -->
            <input type="submit" value="削除*" style="display: inline" />
        </div>

        <!-- 追加(未実装) -->
        <input type="submit" value="追加*" style="display: inline" />

        <!-- 確認 -->
        <input type="submit" value="確認" style="display: inline" />
    </form>

    <!-- 戻る -->
    <form method="get" th:action="@{/list}" style="display: inline">
        <input type="submit" value="戻る" />
    </form>

</body>
</html>

自分で試したこと

下記の記事を参考に記述を変えてみましたが、どの記事もほぼ同じことをやっているので、どれを試してもエラーメッセージは表示されませんでした。

改善策をご教示いただけませんでしょうか?
よろしくお願いいたします。

0

1Answer

例えば

<p th:if="${#fields.hasErrors('question')}">問題を入力してください</p>

の部分を

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

にしてみたら、どうでしょうか?

0Like

Comments

  1. @httrhtm

    Questioner

    ご回答ありがとうございます。
    試してみましたが、同様にエラーメッセージが表示されませんでした。

    一旦、条件分岐で実装しましたが原因が気になります。

Your answer might help someone💌