在Thymeleaf SpringBoot中出现验证错误后，HTML Select选项不起作用
@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个答案
问题是当您显示错误时，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会自动将中间件应用于内部的所有路由，如果您尝试手动添加它，则会
-
我正试图在custom ConstraintValidator中使用@Autowired annotation。 我已经阅读了一些解决方案，但没有一个有效，所以我试图使用Spring的org.springframework.web.bind.support.SpringWebConstraintValidatorFactory强制Hibernate，以创建自动构建的ConstraintValida
-
我刚接触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 >最少八个字符，至少一个大写字母、一个小写字母和一个数字 用户可以为密码字段选择上述模式之一，验证错误消息将相应地更改。 对我来说，上述条件都不能正常工作。 有人能帮我解答一下吗？ 注意：如果我直接用超