Create a simple CRUD with SpringBoot + JPA + Thymeleaf ③ ~ Add Validation ~

Contents

-Continued from Last time --Create a simple CRUD app with Spring Boot --This time, validate the input area --Make name and age required --Age should be in the range 0-150 --Team name can be up to 20 characters

スクリーンショット 2017-10-25 22.49.22.png

procedure

  1. Add validation settings to entity
  2. Add error control to controller
  3. Add an error message to the template

1. Add validation settings to entity

--Validation setting annotates variables of entity class --Edit Player.java

src/main/java/com/example/baseball/domain/Player.java


    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    @NotEmpty // ①
    private String name;
    @NotNull // ②
    @Min(value = 0) // ③
    @Max(value = 150)
    private Integer age;
    @Size(max = 20) // ④
    private String team;
    private String position;

-①: If @NotEmpty is added, null and empty string will not be allowed. -②: If @NotNull is added, null will not be allowed. --③: Set the minimum value with @ Min and the maximum value with @ Max -④: Add @Size to limit the number of characters

2. Add error control to controller

--Add a process to return to the original screen if there is an error --Modify PlayerController.java

src/main/java/com/example/baseball/controller/PlayerController.java


    @GetMapping("new")
    public String newPlayer(Model model) {
        // ①
        Player player = new Player();
        model.addAttribute("player", player);
        return "players/new";
    }

    @PostMapping
    public String create(@Valid @ModelAttribute Player player, BindingResult bindingResult) { // ②
        if(bindingResult.hasErrors()) return "players/new"; // ③
        playerService.save(player);
        return "redirect:/players";
    }

    @PutMapping("{id}")
    public String update(@PathVariable Long id, @Valid @ModelAttribute Player player, BindingResult bindingResult) {
        if(bindingResult.hasErrors()) return "players/edit";
        player.setId(id);
        playerService.save(player);
        return "redirect:/players";
    }

-①: Pass the Player instance to the new creation screen --Without this, the contents entered at the time of the input error cannot be retained. -②: By adding @Valid to player, it becomes a validation check target. --Annotations are arranged side by side, but @Valid depends on player

@Valid @ModelAttribute Player player
//↑ and ↓ are the same
@Valid
@ModelAttribute
Player player

-②: If there is an error, the error information is set in BindingResult bindingResult. --③: If there is an error, bindingResult.hasErrors () returns true, so in that case it is returned to the original screen.

3. Add error message to template

new.html

--Display an error message when there is an error and it is thrown back to the controller

src/main/resources/templates/players/new.html


      <!-- ① -->
      <form th:action="@{/players}" th:method="post" th:object="${player}">
        <!-- ② -->
        <div class="form-group" th:classappend="${#fields.hasErrors('name')}? has-error">
          <label class="control-label">name</label>
          <input class="form-control" type="text" th:field="*{name}" />
          <!-- ③ -->
          <span class="text-danger" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('age')}? has-error">
          <label class="control-label">age</label>
          <input class="form-control" type="number" th:field="*{age}" />
          <span class="text-danger" th:if="${#fields.hasErrors('age')}" th:errors="*{age}"></span>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('team')}? has-error">
          <label class="control-label">Team name</label>
          <input class="form-control" type="text" th:field="*{team}" />
          <span class="text-danger" th:if="${#fields.hasErrors('team')}" th:errors="*{team}"></span>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('position')}? has-error">
          <label class="control-label">Defensive position</label>
          <input class="form-control" type="text" th:field="*{position}" />
          <span class="text-danger" th:if="${#fields.hasErrors('position')}" th:errors="*{position}"></span>
        </div>
        <button class="btn btn-default" type="submit">Create</button>
      </form>

--①: Since the player is now received from the controller, set it to th: object. --Modified so that each input field also uses th: field (see ③ of here) ――The reason why I made this change is because I want to reset the input contents to value when an error occurs and it is thrown back. --②: th: classappend =" $ {# fields.hasErrors ('name')}? has-error " means has in the class attribute when # fields.hasErrors ('name') is true. -Add error --Error information is contained in # fields --If you add has-error to the class attribute, the label and frame will turn red according to the Bootstrap definition. --③: Area for displaying error messages --Elements with th: if set are displayed only when the value of th: if is true (in this case, when there is an error). -- th: errors =" * {name} " displays all error messages set for * {name} --Although it does not occur in this example, if there are multiple errors, all will be displayed with line breaks.

edit.html

--Added the same processing as new.html

src/main/resources/templates/players/edit.html


      <form th:action="@{/players/{id}(id=*{id})}" th:method="put" th:object="${player}">
        <div class="form-group" th:classappend="${#fields.hasErrors('name')}? has-error">
          <label class="control-label">name</label>
          <input class="form-control" type="text" th:field="*{name}" />
          <span class="text-danger" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('age')}? has-error">
          <label class="control-label">age</label>
          <input class="form-control" type="number" th:field="*{age}" />
          <span class="text-danger" th:if="${#fields.hasErrors('age')}" th:errors="*{age}"></span>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('team')}? has-error">
          <label class="control-label">Team name</label>
          <input class="form-control" type="text" th:field="*{team}" />
          <span class="text-danger" th:if="${#fields.hasErrors('team')}" th:errors="*{team}"></span>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('position')}? has-error">
          <label class="control-label">Defensive position</label>
          <input class="form-control" type="text" th:field="*{position}" />
          <span class="text-danger" th:if="${#fields.hasErrors('position')}" th:errors="*{position}"></span>
        </div>
        <button class="btn btn-default" type="submit">update</button>
      </form>

Operation check

--With the modifications made so far, when you access http: // localhost: 8080 / players, the behavior is as follows.

validation.gif

next time

--Next is here

Recommended Posts

Create a simple CRUD with SpringBoot + JPA + Thymeleaf ③ ~ Add Validation ~
Create a simple CRUD with SpringBoot + JPA + Thymeleaf ④ ~ Customize error messages ~
Create a simple CRUD with SpringBoot + JPA + Thymeleaf ② ~ Screen and function creation ~
Make a simple CRUD with SpringBoot + JPA + Thymeleaf ① ~ Hello World ~
Make a simple CRUD with SpringBoot + JPA + Thymeleaf ⑤ ~ Template standardization ~
Create a simple DRUD application with Java + SpringBoot + Gradle + thymeleaf (1)
Create a simple web application with Dropwizard
[Rails withdrawal] Create a simple withdrawal function with rails
Create a simple bar chart with MPAndroidChart
Create a simple search app with Spring Boot
Create a simple bulletin board with Java + MySQL
04. I made a front end with SpringBoot + Thymeleaf
Create CRUD apps with Spring Boot 2 + Thymeleaf + MyBatis
Show a simple Hello World with SpringBoot + IntelliJ
A simple CRUD app made with Nuxt / Laravel (Docker)
Create a simple demo site with Spring Security with Spring Boot 2.1
Create a playground with Xcode 12
Create a simple web server with the Java standard library com.sun.net.httpserver
Draw screen with Thymeleaf in SpringBoot
Create a Vue3 environment with Docker!
Implement text link with Springboot + Thymeleaf
Add Bean Validation with Micronaut (Java)
Create exceptions with a fluid interface
Create a Maven project with a command
Create a simple gateway server by setting masquerade with firewall-cmd of CentOS8
Create a jar file with the command
[Rails6] Create a new app with Rails [Beginner]
Create your own validator with Bean Validation
Create a GUI JSON Viewer with Ruby/GTK3
Create a MySQL environment with Docker from 0-> 1
Create a temporary class with new Object () {}
[docker] [nginx] Make a simple ALB with nginx
Add XML declaration when returning xml with spring-boot
[Rails] Let's create a super simple Rails API
[Rails 5] Create a new app with Rails [Beginner]
Deserialize XML into a collection with spring-boot
Implement CRUD with Spring Boot + Thymeleaf + MySQL
Implement simple CRUD with Go + MySQL + Docker
Try searching for a zip code with REST API using SpringBoot, H2 DB and JPA REST-Only 3 classes to create-