Spring + Thymeleaf form validation error not displaying

Greenhorn

Posts: 2

posted 5 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Error: org.thymeleaf.exceptions.TemplateProcessingException: Error during execution of processor 'org.thymeleaf.spring5.processor.SpringInputGeneralFieldTagProcessor' (template: "watchlistItemForm" - line 47, col 26)

Please help. I have spent hours troubleshooting and googling.

controller:

package com.openclassrooms.Watchlist;

import org.springframework.stereotype.Controller;
import org.springframework.validation.Errors;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.view.RedirectView;

import javax.validation.Valid;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
public class WatchlistController {

List<WatchlistItem> watchlistItems = new ArrayList<>();

@RequestMapping(value = "/watchlist", method = RequestMethod.GET)
    public ModelAndView getWatchlist(){

String viewName = "watchlist";
        Map<String, Object> model = new HashMap<>();
        model.put("numberOfMovies",watchlistItems.size());
        model.put("watchlistItems",watchlistItems);
        return new ModelAndView(viewName,model);
    }

@RequestMapping(value = "/watchlistItemForm", method = RequestMethod.GET)
    public ModelAndView showWatchlistItemForm(@RequestParam(required = false) Integer id){
        String viewName = "watchlistItemForm";
        System.out.println(id);
        Map<String, Object> model = new HashMap<>();

if (Util.findWatchlistItemById(id,watchlistItems)==null){
            model.put("commandObj",new WatchlistItem());
        }
        else{
            model.put("commandObj",Util.findWatchlistItemById(id, watchlistItems));
        }

return new ModelAndView(viewName, model);
    }

@RequestMapping(value = "/watchlistItemForm", method = RequestMethod.POST)
    public ModelAndView submitWatchlistForm(@Valid  WatchlistItem watchlistItem, Errors errors){
        System.out.println("hi");
        if (errors.hasErrors()){

return  new ModelAndView("watchlistItemForm");
        }

if (watchlistItem.getId()==null) {
            watchlistItem.setId(WatchlistItem.index++);
            watchlistItems.add(watchlistItem);
        }

else{
            WatchlistItem existingItem=Util.findWatchlistItemById(watchlistItem.getId(),watchlistItems);
            existingItem.setTitle(watchlistItem.getTitle());
            existingItem.setRating(watchlistItem.getRating());
            existingItem.setPriority(watchlistItem.getPriority());
            existingItem.setComment(watchlistItem.getComment());

}

// watchlistItems.add(watchlistItem);
        RedirectView redirectView = new RedirectView();
        redirectView.setUrl("/watchlist");
        return new ModelAndView(redirectView);
    }

}

watchlistItemForm.html

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Watchlist App</title>
</head>
<body>
<div class = "container">
<nav class = "navbar navbar-expand-sm navbar-dark bg-secondary">
<a class = "navbar-brand" href = "homepage-static.html">Watchlist App</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">

<span class = "navbar-toggler-icon"></span>
</button>

<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav mr-auto">
<li class = "nav-item">
<a class = "nav-link" href = "/">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "watchlist">Watchlist</a>
</li>
<li class = "nav-item active">
<a class = "nav-link" href = "watchlistItemForm">Submit an item</a>
</li>
</ul>

</div>
</nav>
<form action="#" th:action="@{/watchlistItemForm}" th:object="${commandObj}" method="post" >
<h2 class = "mt-4">Submit an item</h2>
<hr/>

<div class = "form-group row ">
<div class="col-sm-8">
<span class="text-danger" > </span>
</div>
</div>
<div class = "form-group row ">
<label for = "title" class = "col-sm-2 col-form-label">Title</label>
<div class = "col-sm-4">
<input th:field="*{title}" type = "text" class = "form-control" placeholder = "Mandatory">
</div>
<div class="col-sm-4">
<span th:if="${#fields.hasErrors('title')}" th:errors="*{title}">title Error</span>

</div>
</div>

<div class = "form-group row ">
<label for = "rating" class = "col-sm-2 col-form-label mr-0">Rating</label>
<div class = "col-sm-4">
<input type = "text" th:field = "*{rating}" class = "form-control" placeholder = "5.0 < Number < 10.0">
</div>
<div class="col-sm-4">
<span class="text-danger"> </span>
</div>
</div>

<div class = "form-group row ">
<label for = "priority" class = "col-sm-2 col-form-label mr-0">Priority</label>
<div class = "col-sm-4">
<input type = "text" th:field = "*{priority}" class = "form-control" placeholder = "Low|Medium|High">
</div>
<div class="col-sm-4">
<span class="text-danger"> </span>
</div>
</div>

<div class = "form-group row">
<label for = "comments" class = "col-sm-2 col-form-label">Comments</label>
<div class = "col-sm-4">
<textarea th:field="*{comment}" class = "form-control" rows = "3" placeholder = "Max. 50 chars"></textarea>
</div>
<div class="col-sm-4">
<span th:if="${#fields.hasErrors('comment')}" th:errors="*{comment}">Comment Error</span>
</div>
</div>
<input type="hidden" th:field="*{id}" />
<div class = "form-group row">
<div class = "col-sm-10">
<button type = "submit" class = "btn btn-primary">Submit</button>
</div>
</div>

</form>
</div>

<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" > </script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" > </script>
</body>
</html>

Model Class

package com.openclassrooms.Watchlist;

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

public class WatchlistItem {
    private Integer id;
    @NotBlank(message = "please enter the title")
    private String title;
    private String rating;
    @Size(max = 50, message = "comment should be maximum 50 characters")
    private String comment;
    private String priority;

public static int index = 1;

public WatchlistItem(){
        System.out.println("constructed empty fields");
    }

public WatchlistItem(String title, String rating, String comment, String priority) {
        super();
        System.out.println("constructed full fields");
        this.title = title;
        this.rating = rating;
        this.comment = comment;
        this.priority = priority;

}

public Integer getId() {
        return id;
    }

public void setId(Integer id) {
        this.id = id;
    }

public String getTitle() {
        return title;
    }

public void setTitle(String title) {
        this.title = title;
    }

public String getRating() {
        return rating;
    }

public void setRating(String rating) {
        this.rating = rating;
    }

public String getComment() {
        return comment;
    }

public void setComment(String comment) {
        this.comment = comment;
    }

public String getPriority() {
        return priority;
    }

public void setPriority(String priority) {
        this.priority = priority;
    }

}