我有一个表单，用户可以在其中向web应用程序提交他的团队。他可以选择一个选项并输入自己的姓名。我已经验证了名称字段不能为空。如果用户将名称字段留空；加上"；，页面以错误名称"刷新；输入名称"；，但是所选择的选项无法打开。用户无法再次选择并更改选项。无法继续。
使用java Spring引导-Hibernate-thymelaf
SubmitController
@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>
问题是，当您显示错误时，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";
}
}
旁注：
最好在百里香中使用GET-POST-REDECT流量。您已经在执行GET-POST部分，但当控制器中的流量正常时，最好使用重定向：
@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";
}
}