jquery - 在模态表单中使用 Spring Boot 和 thymeleaf 进行服务器端验证
问题描述
我只是在学习 spring boot 和 thymeleaf,我知道的是在模态表单中进行验证,而不重定向它,只是在这一步混淆。
我的班级模型
public class Class {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@NotEmpty
@NotBlank
private String className;
public Class(@NotEmpty @NotBlank String className) {
this.className = className;
}
}
Html Fronted 以显示模态
<div class="modal fade" id="addModal" tabindex="-1" th:fragment="modal-add" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Classroom</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form th:action="@{/addclass}" th:object="${class}" method="post">
<div class="modal-body">
<div class="form-group">
<label for="className">Class Name</label>
<input type="text" class="form-control" id="className" th:field="*{className}" placeholder="Name of Class">
<div class="text text-danger" th:if="${#fields.hasErrors('className')}" th:errors="*{className}">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" value="Save" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
类控制器
@PostMapping("/addclass")
public String addClass(@Valid @ModelAttribute("class") Class kelas, BindingResult result) {
if(result.hasErrors()) {
//what to do here ? to show error validation without closing modal?
}else{
classService.addClass(kelas);
}
return "redirect:/classlist";
}
解决方案
在 thymeleaf 中使用开放式模态进行表单验证有点棘手。这是我的解决方案:
在您的控制器函数中添加“RedirectAttributes atts”。添加属性值为 true 的 hasErrors。
@PostMapping("/addclass")
public String addClass(@Valid @ModelAttribute("class") Class kelas, BindingResult result, RedirectAttributes atts) {
if(result.hasErrors()) {
atts.addAttribute("hasErrors", true);
return "classlist";
}else{
classService.addClass(kelas);
}
return "redirect:/classlist";
}
在您的 html 文件中,您使用 th:inline 和 th:if 添加条件 JS 代码。因此,如果任何字段有错误,JS-Code 将被执行。在 JS 代码中,您可以打开模式。
<div class="modal fade" id="addModal" tabindex="-1" th:fragment="modal-add" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<script th:inline="javascript" th:if="${#fields.hasErrors('*')}">$("#addModal").modal("show");</script>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Classroom</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form th:action="@{/addclass}" th:object="${class}" method="post">
<div class="modal-body">
<div class="form-group">
<label for="className">Class Name</label>
<input type="text" class="form-control" id="className" th:field="*{className}" placeholder="Name of Class">
<div class="text text-danger" th:if="${#fields.hasErrors('className')}" th:errors="*{className}">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" value="Save" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
推荐阅读
- javascript - 如何使用 Angular Renderer2 在最后一个子元素之后追加?
- python - Excel 文件未显示在 Google 云端硬盘中
- css - 向容器流体添加填充以确保每个设备从左到右具有相同的空间是否很好
- xamarin.android - 我无法为 xamarin android 项目配置 firebase 分析
- javascript - d3.js如何计算悬停时栏的百分比
- time-complexity - O(N+NM) 可以简化为 O(NM) 吗?
- bash - 使用 -POST 将文件的每一行导入 Elasticsearch
- reactjs - 对装饰器的实验性支持支持错误 VSCODE?
- python-3.x - 如何使用python方法“ImageDataGenerator”并将增强图像保存在变量中?
- html - html电子邮件模板中的动态列表