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

Question

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

解決済

回答 1

投稿 2018/10/02 17:27 ・編集 2018/10/06 15:51

評価
クリップ 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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

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

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

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

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

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

8 件の質問への追記・修正依頼

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

退会済みユーザー

2018/10/04 18:24

＞<form th:action="@{'/todo/' + ${todo.id} + '/edit'}" method="post" th:object="${todoValid}"> の「th:action~」部分のようです。⇒エラーの線マーク出てるからですかね？　　　ちなみにformの閉じタグの前の、divの閉じタグが余計な気がするのですがどうでしょう。

＞<form th:action="@{'/todo/' + ${todo.id} + '/edit'}" method="post" th:object="${todoValid}"> の「th:action~」部分のようです。⇒エラーの線マーク出てるからですかね？　　　ちなみにformの閉じタグの前の、divの閉じタグが余計な気がするのですがどうでしょう。

キャンセル
kissy

2018/10/04 22:25

ありがとうございます。エラー線は出ておらず、実行も出来るのですが、いざローカル環境で試してみるとエラー…という感じです。エラーメッセージが、「th:action~」にある「~{todo.id}」の部分を差しているようだったので上手く機能していないのかなと思いました。　　form閉じタグ前の</div>は確かに余計でしたので、削除しましたが、特に変化はありませんでした…。

ありがとうございます。エラー線は出ておらず、実行も出来るのですが、いざローカル環境で試してみるとエラー…という感じです。エラーメッセージが、「th:action~」にある「~{todo.id}」の部分を差しているようだったので上手く機能していないのかなと思いました。　　form閉じタグ前の</div>は確かに余計でしたので、削除しましたが、特に変化はありませんでした…。

キャンセル
退会済みユーザー

2018/10/05 10:17

ちょっとコードお借りしますね。エラーが出るタイミングっていつですか？

ちょっとコードお借りしますね。エラーが出るタイミングっていつですか？

キャンセル
退会済みユーザー

2018/10/05 10:17

手順が知りたいです。

手順が知りたいです。

キャンセル
kissy

2018/10/05 17:03

何度もお手数をおかけしています。エラーがでるタイミングとしてはブラウザ（ローカル環境）で、「トップページから個別の編集画面に飛ぶ→フォーム上で編集→更新ボタンをクリック…」という手順です。バリデーションに引っかからない(フォームを空欄にしない)場合は問題なく送信でき、データが編集できているのですが、バリデーションに引っ掛かった時にエラーが出てしまう状態です。

何度もお手数をおかけしています。エラーがでるタイミングとしてはブラウザ（ローカル環境）で、「トップページから個別の編集画面に飛ぶ→フォーム上で編集→更新ボタンをクリック…」という手順です。バリデーションに引っかからない(フォームを空欄にしない)場合は問題なく送信でき、データが編集できているのですが、バリデーションに引っ掛かった時にエラーが出てしまう状態です。

キャンセル
退会済みユーザー

2018/10/05 17:07

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

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

キャンセル
kissy

2018/10/05 18:23

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

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

キャンセル
kissy

2018/10/06 16:37

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

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

キャンセル

回答 1 件

評価が高い順
新着順
古い順

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

score 1 · Accepted Answer · 2018-10-05T23:39

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

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

原因は恐らく「${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;
        }

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

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

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

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

前提・実現したいこと

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

該当のソースコード

その他

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

関連した質問

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

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

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

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

前提・実現したいこと

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

該当のソースコード

その他

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

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン