質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.22%

springbootでの更新時バリデーション実装

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,847

kissy

score 17

 前提・実現したいこと

springbootでwebアプリケーションの勉強中です。
あらかじめフォームで送った内容を編集・更新する機能を実装しているのですが、エラーが出て困っています。
編集・更新する際に、null禁止などのバリデーションをかけているのですが、バリデーションに引っかかった場合は、元の編集画面に戻し、エラーメッセージを出したいです。
現在、編集画面でフォームを編集、バリデーションに引っ掛かった場合、更新ボタンを押すとエラーが出てしまいます。
バリデーションに引っかからない場合は問題なく編集ができ、ページ遷移します。

 発生している問題・エラーメッセージ

org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/todo/edit.html]")
Caused by: org.attoparser.ParseException: Exception evaluating SpringEL expression: "todo.id" (template: "todo/edit" - line 15, col 11)

 該当のソースコード

@GetMapping("todo/{id}/edit")
    public ModelAndView edit(@PathVariable("id") Long id, ModelAndView mav){

        Optional<Todo> todoOne = todoService.findById(id);
        if(todoOne.isPresent()){
            Todo todo = todoOne.get();
            mav.addObject("todo",todo);
            mav.setViewName("todo/edit");
        }else {
            mav.addObject("error","該当するToDoはありません");
            mav.setViewName("todo/edit");
        }
        return mav;
    }

@PostMapping("/todo/{id}/edit")
    public ModelAndView updateTodo(@ModelAttribute @Validated TodoValid todoValid, BindingResult result, @PathVariable("id") Long id, RedirectAttributes redirectAttributes,ModelAndView mav){
       Todo todo = todoService.getById(id);

        if (result.hasErrors()) {
            mav.setViewName("todo/edit");
            return mav;
        }

(中略)

            BeanUtils.copyProperties(todoValid, todo);
            todoService.save(todo);
            mav.setViewName("redirect:/");
            return mav;
    }

バリデーション設定↓

package com.example.web.controller;

import org.hibernate.validator.constraints.Length;

import org.springframework.format.annotation.DateTimeFormat;
import javax.validation.constraints.NotNull;

import java.util.Date;

public class TodoValid {

    @Length(max = 30,message = "Todoは30字以内で入力してください")
    @NotNull(message = "Todoを入力してください")
    private String text;

    @NotNull(message = "期限を設定してください")
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private Date limittime;

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public Date getLimittime() {
        return limittime;
    }

    public void setLimittime(Date limittime) {
        this.limittime = limittime;
    }


}


エンティティ

@Entity
@Table(name = "todo")
public class Todo {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;

    private String text;

    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private Date limittime;

    @DateTimeFormat(pattern = "yyyy-MM-dd")
    @Column(updatable = false)
    private Date createtime;

    private boolean complete;

(ゲッター、セッター省略)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="/css/style.css" th:href="@{/css/style.css}" />
    <title>Todo編集</title>
</head>
<body>
<header>
    <a class="logo" th:href="@{'/'}">ToDoリスト管理</a>
    <div class="serch"><a th:href="@{'/todo' + '/find'}">検索</a></div>
</header>
<div class="new">
    <p>ToDoの内容を変更します</p>
    <form th:action="@{'/todo/' + ${todo.id} + '/edit'}" method="post" th:object="{todoValid}">

        <div th:object="${todo}">
            <div>ToDo名
                <textarea placeholder="すること" name="text" th:text="*{text}" maxlength="30"></textarea>
            </div>
            <div>期限
                <input name="limittime" type="date" th:value="*{#dates.format(createtime,'yyyy-MM-dd')}"/>
            </div>

            <input class="button" type="submit" value="ToDoの更新" name="new" />

        </div>

        <div th:each="todoValid:${todoValid}">
            <div th:if="${#fields.hasErrors('text')}" th:errors="*{text}"></div>
            <div th:if="${#fields.hasErrors('limittime')}" th:errors="*{limittime}"></div>
        </div>

        <div th:if="${error}" th:text="${error}"></div>

    </form>

</div>

</body>
</html>

その他

エラーが出ている箇所は「edit.hrml」の
<form th:action="@{'/todo/' + ${todo.id} + '/edit'}" method="post" th:object="${todoValid}">
の「th:action~」部分のようです。
この記述を変更してしまうと、フォームが上手く送れないと思うのですが…

問題の箇所がわかる方がいらっしゃったら、ご教授いただきたいです。

 補足情報(FW/ツールのバージョンなど)

・Springboot(gradle)
・thymeleaf
・MySQL@5.7
・intelliJ

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2018/10/05 17:07

    やってみたのですが・・・正しいのか不明。get時のコードとhtml追記お願いします!

    キャンセル

  • kissy

    2018/10/05 18:23

    完全に失念していました、すいません。get時のコードなど追記させていただきました。長い間ありがとうございます。

    キャンセル

  • kissy

    2018/10/06 16:37

    何度もありがとうございました。皆様のお力を借りて、無事解決いたしました。

    キャンセル

回答 1

checkベストアンサー

+1

ざっとコードを見て以下の原因ではないかと考えられます。

いつエラーが発生したのか、について言及されていませんが
恐らく初回表示の時点で既にエラーが発生しているのではないでしょうか?

原因は恐らく「${todo.id}参照する際に todo なんてオブジェクトが存在していないため」です。

${todo.id}をFormのアクションURLに利用するために参照されていますが、
todoオブジェクトがModelAndViewに設定されていない経路があります。
具体的には以下のコントローラーの処理です。

GET

@GetMapping("todo/{id}/edit")
    public ModelAndView edit(@PathVariable("id") Long id, ModelAndView mav){

        Optional<Todo> todoOne = todoService.findById(id);
        if(todoOne.isPresent()){
            Todo todo = todoOne.get();
            mav.addObject("todo",todo);
            mav.setViewName("todo/edit");
        }else {
            // ここ
            mav.addObject("error","該当するToDoはありません");
            mav.setViewName("todo/edit");
        }
        return mav;
    }


POST

@PostMapping("/todo/{id}/edit")
    public ModelAndView updateTodo(@ModelAttribute @Validated TodoValid todoValid, BindingResult result, @PathVariable("id") Long id, RedirectAttributes redirectAttributes,ModelAndView mav){
       Todo todo = todoService.getById(id);

        if (result.hasErrors()) {
            // ここ
            mav.setViewName("todo/edit");
            return mav;
        }

※全体のソースコードを拝見していないため推測混じりで記載します

edit.hrml参照時は恐らくGetメソッドでアクセスされるかと思いますので
コントローラーの edit メソッドを経由して edit.html を表示しているかと考えられます。
しかし、 id に合致するレコードは存在していないため 

if(todoOne.isPresent())


の判定で FALSE となりModelAndViewに対して "error" が設定されます。
ところが、ここで "todo" に対応するオブジェクトを設定してないために
Thymeleaf側で、todo なんてオブジェクトはしらぬ!とエラーになっていると思われます。

試しに以下のURLでアクセスするとエラーは発生しないのではないでしょうか?

todo/レコードが存在するID/edit


逆に以下のURLでアクセスするとエラーが発生するのではないでしょうか?

todo/レコードが存在しないID/edit

解決案(GET版)
簡潔に対応しようとすると、

     if(todoOne.isPresent()){
            Todo todo = todoOne.get();
            mav.addObject("todo",todo);
            mav.setViewName("todo/edit");
        }else {
            Todo todo = new Todo(); // add
            todo.setId(-1); // add
            mav.addObject("error","該当するToDoはありません");
            mav.addObject("todo", todo);
            mav.setViewName("todo/edit");
        }

解決案(POST版)

        if (result.hasErrors()) {
            Todo todo = new Todo();
            todo.setId(-1);
       /* または既に存在するIDを選択済みであるというのであれば以下のようにサービスから取得したTodoを設定する方が良いかもしれません
            Todo todo = todoService.findById(id);
            */
            mav.addObject("error","該当するToDoはありません");
            mav.addObject("todo", todo);
            mav.setViewName("todo/edit");
            return mav;
        }

長々と失礼しました。
以上、ご確認いただけますか。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/06 16:08 編集

    ありがとうございます。エラーが出るタイミングをきちんと記載していなくて申し訳なかったのですが、表示までは問題なくできています。その後、文章を編集して更新ボタンを押すと、バリデーションに引っ掛かっている場合、編集画面に戻りエラーメッセージを出したいのに、現状エラーになってしまうということでした。
    頂いた解決案のコードを試してみたところ、無事想定通りの動きになりました!{todo.id}の部分が具体的にどう問題なのかいまいちわからなかったのですが、オブジェクトがないから怒られていたのですね。詳しい解説までありがとうございました。

    キャンセル

  • 2018/10/06 17:06 編集

    想定通りに動作したという事で承知しました。
    記載したコードは”とりあえず動作するようにしたコード"なので適宜ご変更いただければと思います。
    具体的な原因については、私の方からは「SpringELの言語仕様で、参照オブジェウトが存在しない場合は例外が発生する」程度の回答しかできず申し訳ありません。

    どうぞよろしくお願いします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る