[JAVA] [Introduction to Spring Boot] Form validation check

Purpose

For those who have finished working on the Spring Quickstart Guide, those who have started learning Spring Boot, and those who want to review it.

We will share what we have learned by actually working on the official guide Validating Form Input.

The completed form is here.

There is a form to enter the name and age,

If the Submit button is pressed with an invalid value entered, an error message will be displayed and

If a valid value is entered, we will implement it so that you can move to another screen.

The development environment and the review so far are as follows.

Development environment

OS: macOS Mojave version 10.14.6
Text editor: Visual Studio Code (hereinafter VSCode)
Java: 11.0.2

Click here for a review of the Quickstart Guide Click here for a review of Building a RESTful Web Service Click here for a review of Consuming a RESTful Web Service Click here for a review of Accessing Data with JPA Click here for a review of the Handling Form Submission

1. Start the Spring Boot project!

First, access spring initializr.

1. Click the ADD DEPENDENCIES button to add Spring Web and Thymeleaf. 2.Artifact, Name changed to validating-form-input.
2. Change Java to 11.

Then click the GENERATE button to download the Zip file.

Extract the downloaded Zip file and you're ready to go.

2. Add code!

Open the previous folder with VS Code. We recommend installing the Java Extension Pack for extensions. It is said that you should install it.

Let's create PersonForm.java!

Create a PersonForm.java file in src / main / java / com / example / validatingforminput /.

Add the code referring to the formula.

PersonForm.java

package com.example.validatingforminput;

import javax.validation.constraints.Min;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

public class PersonForm {

  @NotNull
  @Size(min=2, max=30)
  private String name;

  @NotNull
  @Min(18)
  private Integer age;

  public String getName() {
    return this.name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public Integer getAge() {
    return age;
  }

  public void setAge(Integer age) {
    this.age = age;
  }

  public String toString() {
    return "Person(Name: " + this.name + ", Age: " + this.age + ")";
  }
}

We will dig deeper into the added code.

① @ Not Null and @ Size

PersonForm.java

@NotNull
@Size(min=2, max=30)
private String name;

Two validation annotations are added when declaring a String type name variable.

@NotNull does not allow ** null **. Please note that nulls are not allowed, empty strings and spaces are allowed.

@Size verifies whether it is ** min or more ** and ** max or less ** specified in(). This time, it is @Size (min = 2, max = 30), so an error will occur if it is not 2 or more and 30 or less.

②@Min

PersonForm.java

@NotNull
@Min(18)
private Integer age;

Two validation annotations are added when declaring an Integer type age variable. (One is @ NotNull mentioned above)

@Min is verified whether it is smaller than the value described in(). This time, it is @ Min (18), so less than 18 will result in an error.

③ Getter / setter, toString method

PersonForm.java

public String getName() {
  return this.name;
}

public void setName(String name) {
  this.name = name;
}

public Integer getAge() {
  return age;
}

public void setAge(Integer age) {
  this.age = age;
}

public String toString() {
  return "Person(Name: " + this.name + ", Age: " + this.age + ")";
}

It defines getter / setter methods for getting and changing the values of variables name and age. It also defines a toString method to display name and age as strings. (I don't think I'm using it this time, but is it for debugging?)

Let's add validation dependency to pom.xml!

Although it was not mentioned in the official guide, when Spring Boot 2.3 or higher, ʻImport javax.validation.constraints. 〇〇 of PersonForm.java` will result in an error. (Spring Boot2.3 Relealse Notes)

Add the following to dependencies.

pom.xml

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

Let's create WebController.java!

Create a WebController.java file in src / main / java / com / example / validatingforminput /.

Add the code referring to the formula.

WebController.java

package com.example.validatingforminput;

import javax.validation.Valid;

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Controller
public class WebController implements WebMvcConfigurer {

  @Override
  public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/results").setViewName("results");
  }

  @GetMapping("/")
  public String showForm(PersonForm personForm) {
    return "form";
  }

  @PostMapping("/")
  public String checkPersonInfo(@Valid PersonForm personForm, BindingResult bindingResult) {

    if (bindingResult.hasErrors()) {
      return "form";
    }

    return "redirect:/results";
  }
}

We will dig deeper into the added code.

① WebMvcConfigurer interface and addViewControllers method

WebController.java

@Controller
public class WebController implements WebMvcConfigurer {

  @Override
  public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/results").setViewName("results");
  }

 //The following is omitted
}

Implements the WebMvcConfigurer interface, overriding the addViewControllers method.

It is interpreted that the URL http: // localhost: 8080 / results is set to refer to the template ** results.html **. It seems that the URL and template are mapped. The implementation of results.html will be done later.

② showForm method

WebController.java

@GetMapping("/")
public String showForm(PersonForm personForm) {
  return "form";
}

@GetMapping is an annotation to call the showForm method when there is a GET request athttp: // localhost: 8080 /. I am receiving a PersonForm as an argument. PersonForm can be associated with the form attribute of form.html, which is the return value of the method. We will implement form.html later.

③ checkPersonInfo method

WebController.java

@PostMapping("/")
public String checkPersonInfo(@Valid PersonForm personForm, BindingResult bindingResult) {

  if (bindingResult.hasErrors()) {
    return "form";
  }

  return "redirect:/results";
}

@PostMapping is an annotation to call the checkPersonInfo method when there is a POST request athttp: // localhost: 8080 /. The first argument, @Valid PersonForm personForm, validates the input data. The second argument, BindingResult bindingResult, is an annotation to hold the input data and the validation result (whether there is an error).

In the if statement where bindingResult.hasErrors () is written, it is checked whether there is an error. If there is an error, redraw form.html with the error message and the value entered.

If there are no errors, you will be redirected to http: // localhost: 8080 / results.

Let's create form.html!

Create a form.html file in src / main / resources / templates /.

Add the code referring to the formula.

form.html

<html xmlns:th="http://www.thymeleaf.org">
  <body>
      <form action="#" th:action="@{/}" th:object="${personForm}" method="post">
        <table>
          <tr>
            <td>Name:</td>
            <td><input type="text" th:field="*{name}" /></td>
            <td th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</td>
          </tr>
          <tr>
            <td>Age:</td>
            <td><input type="text" th:field="*{age}" /></td>
            <td th:if="${#fields.hasErrors('age')}" th:errors="*{age}">Age Error</td>
          </tr>
          <tr>
            <td><button type="submit">Submit</button></td>
          </tr>
        </table>
      </form>
  </body>
</html>

It's a form screen for entering name and age.

We will dig deeper into the description of thymeleaf in the added code.

thymeleaf is a template engine that can be handled by springboot. Described as th: 〇〇. [Thymeleaf tutorial] written in Japanese (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#thymeleaf%E3%81%AE%E7%B4%B9%E4%BB% There is also 8B)!

th:action

Replaces the content of the action attribute of the form tag. The description method is th: action =" @ {} ". Since method = "post", the checkPersonInfo method of WebController is called when the Submit button is pressed.

th:object

The object is specified by th: object. This allows you to refer to variables in objects like * {name} instead of personForm.name.

th:field

Write th: field =" * {variable name} " to display the variables in the object specified by th: object. This time, since there are name and age in the PersonForm class, it will be th: field =" * {name} ", th: field =" * {age} ". In addition, the variable name described in th: field =" * {variable name} " is the id attribute and name attribute of input.

th:if

Write th: if = condition. If true, the tag and child elements are displayed. This condition will be true if there is an error.

th:errors

Write th: errors =" * {variable name} ". An error message will be displayed if there is an error. It feels like you have secured an area to display error messages by checking for errors with th: if and th: errors.

Let's create results.html!

Create a results.html file in src / main / resources / templates /.

Add the code referring to the formula.

results.html

<html>
  <body>
    Congratulations! You are old enough to sign up for this site.
  </body>
</html>

If no invalid value is entered on the form screen, the screen will change to this screen.

3. Let's run it!

Now that the application is ready to run, let's check.

Enter the following command in the terminal and press Enter.

Terminal

$ ./mvnw spring-boot:run

Then, when you access http: // localhost: 8080 /, you should see the form screen below. (Form.html is displayed)

** Enter one letter for name and a number less than 18 for age and press the Submit button to display an error message. ** **

** If you press the Submit button without entering anything in age, an error message will be displayed. ** **

** Enter 2 or more characters for name and 18 or more for age, and press the Submit button to display the result screen (result.html). ** **

Thank you for your hard work! done!

Reference site

** Verification of input value with Spring Boot ** ** If it's a Controller that just returns the view name, you don't need a separate Controller! ** ** Validation and Error Messages **