Java 未使用thymeleaf和引导应用于验证表单的样式

尝试在引导窗体中添加带有错误验证样式的文本

这是表格的一部分：

<label th:text="#{name}"
        class="col-form-label col-form-label-sm"></label> 
<input
        type="text" class="form-control form-control-sm"
        th:field="*{name}" /> 
<span
        th:if="${#fields.hasErrors('name')}" th:errors="*{name}"
        th:class="invalid-feedback">Here there is an error</span>

这里有一个错误

我收到关于验证错误的消息，但没有样式

如果我调试，我会看到具有以下样式的类：

<span class="invalid-feedback">Here there is an error</span>

这里有一个错误

我尝试过几种风格，如帮助块，但没有办法

我正在使用bootstrap4.0.0-alpha.6

有什么想法吗

---

如果您还感兴趣，谢谢

提供三种方法：客户端自定义验证、浏览器默认值和服务器端验证

在您的帖子中，我假设您使用的是服务器端，这意味着您正在发送要在服务器代码中验证的数据，以便在重新呈现表单时显示错误字段

在这种情况下，请记住，要启动bootstrap的样式，代码中需要某种html结构，例如：

<input th:field ="*{email}" type="email" class="form-control"
        th:classappend="${not #lists.isEmpty(#fields.errors('email'))} ? is-invalid"
        required>
<div class="invalid-feedback">
    <p th:each="error: ${#fields.errors('email')}" th:text="${error}">Invalid data</p>
</div>

无效数据

（我相信

span

标签也适用于

）

这是错误样式工作所必需的最小结构。发生了什么：

最初，分配了

无效反馈

显示：无

提交表单时，如果表单有错误，它将被重新呈现，并且由开发人员提供一种机制，该机制将在每个

的

类
属性中包含
无效的
。在前面的代码中，
th:classappend=“${not#lists.isEmpty（#fields.errors（'email'））}”无效”
对此负责。（我不熟悉Spring和Thymeleaf，因此可能会有一个更整洁的代码）

声明

.form control.无效~。\u表单中的无效反馈

。scss将启动并将

显示：块

分配给

，从而显示每个字段的错误消息

这应该足以显示每个字段下的错误，并用红色突出显示它们

---

HIH

您可以在

th:class

中删除

th:

。当涉及到一个变量并且需要Thymeleaf对其求值时，基本上需要使用

th:

。无论是否使用th，都不会应用该类。使用内联样式解决临时问题