我怎样才能使我的表格需要某些字段

Question

I am trying to make a Spring Boot project that works like an e-commerce website.

In the forms for creating and editing a product, I want to make it so that all fields are required, because if I do not input a price, then I get the "Whitelabel Error Page: This application has no explicit mapping for /error, so you are seeing this as a fallback." error.

Main class

@SpringBootApplication
public class EcommerceWebsiteApplication {

    public static void main(String[] args) {
        SpringApplication.run(EcommerceWebsiteApplication.class, args);
    }

}

ProductController

/**This is the product controller class. It has different mappings as well as the methods that allow 
 * the user to perform the different CRUD operations with regard to the products. */
@Controller
public class ProductController {

    @Autowired
    ProductRepository productRepository;

    @RequestMapping("/product")
    public String product(Model model) {
        model.addAttribute("products", productRepository.findAll());

        return "product";
    }

    @RequestMapping("/create")
    public String create(Model model) {
        return "create";
    }
 
    @RequestMapping("/save")
    public String save(@RequestParam String prodName, @RequestParam String prodDesc, @RequestParam Double prodPrice, @RequestParam String prodImage) {
        Product product = new Product();
        product.setProdName(prodName);
        product.setProdDesc(prodDesc);
        product.setProdPrice(prodPrice);
        product.setProdImage(prodImage);
        
        productRepository.save(product);
        
        return "redirect:/show/" + product.getId();
    }
    
    @RequestMapping("/show/{id}")
    public String show(@PathVariable String id, Model model) {
        model.addAttribute("product", productRepository.findById(id).get());
       
        return "show";
    }
    
    @RequestMapping("/delete")
    public String delete(@RequestParam String id) {
        Optional<Product> product = productRepository.findById(id);
        productRepository.delete(product.get());

        return "redirect:/product";
    }
    
    @RequestMapping("/edit/{id}")
    public String edit(@PathVariable String id, Model model) {
        model.addAttribute("product", productRepository.findById(id).get());
        
        return "edit";
    }
    
    @RequestMapping("/update")
    public String update(@RequestParam String id, @RequestParam String prodName, @RequestParam String prodDesc, @RequestParam Double prodPrice, @RequestParam String prodImage) {
        Optional<Product> product = productRepository.findById(id);
        
        product.get().setProdName(prodName);
        product.get().setProdDesc(prodDesc);
        product.get().setProdPrice(prodPrice);
        product.get().setProdImage(prodImage);
        
        productRepository.save(product.get());

        return "redirect:/show/" + product.get().getId();
    }
}

Product POJO

@Document(collection = "products")
public class Product {
    
    @Id
    String id;
    
    String prodName;
    String prodDesc;
    Double prodPrice;
    String prodImage;

    public Product() {
    }

    public Product(String prodName, String prodDesc, Double prodPrice, String prodImage) {
        this.prodName = prodName;
        this.prodDesc = prodDesc;
        this.prodPrice = prodPrice;
        this.prodImage = prodImage;
    }

    public String getId() {
        return id;
    }

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

    public String getProdName() {
        return prodName;
    }

    public void setProdName(String prodName) {
        this.prodName = prodName;
    }

    public String getProdDesc() {
        return prodDesc;
    }

    public void setProdDesc(String prodDesc) {
        this.prodDesc = prodDesc;
    }

    public Double getProdPrice() {
        return prodPrice;
    }

    public void setProdPrice(Double prodPrice) {
        this.prodPrice = prodPrice;
    }

    public String getProdImage() {
        return prodImage;
    }

    public void setProdImage(String prodImage) {
        this.prodImage = prodImage;
    }
}

create.html form page

<!DOCTYPE HTML>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="default">
    <head>
        <title>Create Product</title>
    </head>
    <body>
        <div layout:fragment="content" class="row">
            <div class="col-xs-8 col-md-8">
            
                <h3>
                    <a href="/product" class="btn btn-lg btn-primary"><span class="glyphicon glyphicon-list"></span>Product List</a>
                </h3>
                
                <h2>Create Product</h2>
                
                <form action="/save">
                
                    <div class="form-group">
                        <label for="email">Product Name:</label>
                        <input type="text" class="form-control" name="prodName" />
                    </div>
                    <div class="form-group">
                        <label for="email">Product Description</label>
                        <textarea class="form-control" name="prodDesc" cols="60" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="email">Product Price</label>
                        <input type="number" class="form-control" name="prodPrice" />
                    </div>
                    <div class="form-group">
                        <label for="email">Product Image URL:</label>
                        <input type="url" class="form-control" name="prodImage" />
                    </div>
                    
                    <button type="submit" class="btn btn-success">Save</button>
                </form>
            </div>
        </div>
    </body>
</html>

edit.html form page

<!DOCTYPE HTML>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="default">
    <head>
        <title>Edit Product</title>
    </head>
    <body>
        <div layout:fragment="content" class="row">
            <div class="col-xs-8 col-md-8">
            
                <h3>
                    <a href="/product" class="btn btn-lg btn-primary"><span class="glyphicon glyphicon-list"></span>Product List</a>
                </h3>
                
                <h2>Edit Product</h2>
                
                <form action="/update">
                
                    <div class="form-group">
                        <label for="email">Product Name:</label>
                        <input type="text" class="form-control" name="prodName" th:value="${product.prodName}" />
                    </div>
                    <div class="form-group">
                        <label for="email">Product Description</label>
                        <textarea class="form-control" name="prodDesc" cols="60" rows="3" th:text="${product.prodDesc}"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="email">Product Price</label>
                        <input type="number" class="form-control" name="prodPrice" th:value="${product.prodPrice}" />
                    </div>
                    <div class="form-group">
                        <label for="email">Product Image URL:</label>
                        <input type="url" class="form-control" name="prodImage" th:value="${product.prodImage}" />
                    </div>
                    
                    <input type="hidden" name="id" th:value="${product.id}" />
                    
                    <button type="submit" class="btn btn-success">Save</button>
                </form>
            </div>
        </div>
    </body>
</html>

pom.xml

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.0.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ecommerce</groupId>
    <artifactId>ecommerce-website</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>ecommerce-website</name>
    <description>Ecommerce website using Spring Boot</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-mongodb</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

I tried looking on different forms, and I saw answers that involved using annotations like @NotNull or creating a configuration class, but neither of those have worked for me.

Answer 1

Add spring-boot-starter-validation as a dependency. Add the annotations to your Product and use Product as a model object instead of requst parameters.

@RequestMapping("/save")
public String save(@Valid @ModelAttribute Product product) {
    productRepository.save(product);
    return "redirect:/show/" + product.getId();
}

@Document(collection = "products")
public class Product {
    
    @Id
    String id;
    
    @NotBlank
    String prodName;
    @NotBlank
    String prodDesc;
    @Min(0.01d)
    Double prodPrice;
    String prodImage;

Some of that for validation (ofcourse you would need to determine which to use based on your requirements.

Additionally use proper types and required keyword in your HTML templates.

<div class="form-group">
    <label for="email">Product Name:</label>
    <input type="text" class="form-control" name="prodName" required />
</div>
<div class="form-group">
    <label for="prodDesc">Product Description</label>
    <textarea class="form-control" name="prodDesc" cols="60" rows="3" required></textarea>
</div>
<div class="form-group">
    <label for="prodPrice">Product Price</label>
    <input type="number" class="form-control" name="prodPrice" />
</div>
<div class="form-group">
    <label for="prodImage">Product Image URL:</label>
    <input type="url" class="form-control" name="prodImage" />
</div>