当前位置: 首页 > 知识库问答 >
问题:

在Thymeleaf SpringBoot中出现验证错误后,HTML Select选项不起作用

西门嘉澍
2023-03-14
 @GetMapping("/submit")
    public String showForm (Model model) {
        Submit submit = new Submit();
        model.addAttribute("submit", submit);
        List<String> rank = Arrays.asList("I", "II", "III", "IV", "V", "VI", "X" );
        model.addAttribute("rank", rank);
        return "submit_form";
    }

    @PostMapping("/submit")
    public String submitForm (@Valid @ModelAttribute("submit") Submit submit, BindingResult bindingResult) {

        if (bindingResult.hasErrors()) {
            return "submit_form";
        } else {
            submitRepo.save(submit);
            return "submit_ok";
        }
    }

提交

@Entity
public class Submit {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;

    @NotBlank(message = "Please enter your team name")
    private String name;

    private String rank;
//...

submit_form.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Submit your team</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
          integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/>
</head>
<body>

<nav th:replace="index :: nav"></nav>

<div class="container my-5">
    <div align="center"><h1>Submit your team here! </h1></div>
    <div class="card">
        <div class="card-body">
            <div class="col-md-10">
                <form action="#" th:action="@{/submit}" th:object="${submit}" method="post">
                    <div class="row">
                        <div class="form-group col-md-8">
                            <label for="name" class="col-form-label">Name of your team: </label>
                            <input type="text" th:field="*{name}" class="form-control" id="name">
                            <span th:if="${#fields.hasErrors('name')}" th:errors="*{name}" style="color: red">Name error</span>
                        </div>
                        <div class="form-group col-md-8">
                            <label for="rank" class="col-form-label">Select Team's rank: </label>
                            <select th:field="*{rank}" class="form-control" id="rank">
                                <option th:each="p : ${rank}" th:value="${p}" th:text="${p}"></option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <input type="submit" class="btn btn-primary" value="Add team">
                        </div>
                        <div class="form-group col-md-8"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

共有1个答案

严狐若
2023-03-14

问题是当您显示错误时,rank不再在模型中。

解决方案是再次将其添加到模型中:

 @PostMapping("/submit")
    public String submitForm (@Valid @ModelAttribute("submit") Submit submit, BindingResult bindingResult, Model model) {

        if (bindingResult.hasErrors()) {
            List<String> rank = Arrays.asList("I", "II", "III", "IV", "V", "VI", "X" );
            model.addAttribute("rank", rank);
            return "submit_form";
        } else {
            submitRepo.save(submit);
            return "submit_ok";
        }
    }

附注:

@PostMapping("/submit")
    public String submitForm (@Valid @ModelAttribute("submit") Submit submit, BindingResult bindingResult) {

        if (bindingResult.hasErrors()) {
            List<String> rank = Arrays.asList("I", "II", "III", "IV", "V", "VI", "X" );
            model.addAttribute("rank", rank);
            return "submit_form";
        } else {
            submitRepo.save(submit);
            return "redirect:/submit";
        }
    }
 类似资料:
  • 我在一个组件中有以下内容: 脚本: 因此,我将表单数据提交到我的数据库,然后在成功promise中,我使用它。$refs.form.reset();重新设置我的表单。 但是,我会立即收到错误消息,并且在每次提交后都会收到错误消息: "[Vue警告]:错误在下一个滴答:"TypeError:无法读取属性'长度'的未定义" 和 TypeError:无法读取未定义的属性“length”

  • 问题内容: 我想在用户输入错误的同时在“视图”页面中显示验证错误。可以的是,当用户输入错误时,它不会在数据库中保存任何内容。但是用户视图页面中没有错误消息。如果有人发现错误,请帮助我。 这是控制器: 这是路线: 这是刀片视图页面: 这是错误消息块: 问题答案: 如果您使用的是5.2.27或更高版本,请尝试删除中间件。现在,Laravel会自动将中间件应用于内部的所有路由,如果您尝试手动添加它,则会

  • 我刚接触spring,我使用《spring in action 5》一书对其进行了探索。我对我的网站做了类似的操作,我已经为页面编写了2个控制器和2个html文件。第一页是比萨饼制作表单。第二个是订单提交。我的控制器代码实际上与书中的相同。在我开始验证表单输入之前,一切都很顺利。我做了比萨饼、订购课程和控制器所需的一切。 订单类: 比萨饼类: 披萨制作控制器: 表单提交控制器: 问题在于验证比萨饼

  • 我在Angular中有一个自定义验证的表单构建器,但我在自定义验证中读取文件后无法获取文件的类型。 下面是StackBlitz: https://stackblitz.com/edit/Angular-ivy-atwqqc?file=src%2fapp%2fapp.component.ts TS文件

  • 我是angular 5的新用户,在这里我试图根据一些条件来验证用户密码。 < li >最少六个字符,至少一个字母和一个数字 < li >最少八个字符,至少一个字母、一个数字和一个特殊字符 < li >最少八个字符,至少一个大写字母、一个小写字母和一个数字 用户可以为密码字段选择上述模式之一,验证错误消息将相应地更改。 对我来说,上述条件都不能正常工作。 有人能帮我解答一下吗? 注意:如果我直接用超

  • 我正试图在custom ConstraintValidator中使用@Autowired annotation。 我已经阅读了一些解决方案,但没有一个有效,所以我试图使用Spring的org.springframework.web.bind.support.SpringWebConstraintValidatorFactory强制Hibernate,以创建自动构建的ConstraintValida