未使用 thymeleaf 和 bootstrap 应用于验证表单的样式答案

【问题标题】：styles not applied on validation form using thymeleaf and bootstrap未使用 thymeleaf 和 bootstrap 应用于验证表单的样式
【发布时间】：2018-09-19 10:48:31
【问题描述】：

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

这是表格的一部分：

<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>

我已经尝试过几种样式，例如 help-block 但没有办法。

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

有什么想法吗？

谢谢

【问题讨论】：

您可以删除th:class中的th:。当涉及变量并且需要 Thymeleaf 对其进行评估时，您基本上需要使用 th:。
无论有无，该类均不适用。使用内联样式临时解决

标签： java spring-boot bootstrap-4 thymeleaf

【解决方案1】：

如果您仍然感兴趣。

Bootstrap's current validation docs 为您提供三种方法：客户端自定义验证、浏览器默认值和服务器端验证。

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

在这种情况下，请记住，要启动引导程序的样式，您的代码需要特定的 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 标签也适用于<div class="invalid-feedback">）

这是错误样式起作用的最小必要结构。会发生什么：

最初，invalid-feedback 被分配display: none
表单已提交，如果出现错误将重新呈现，由开发人员提供一种机制，该机制将在每个 class 属性中包含 is-invalid 并出现错误.在前面的代码中，th:classappend="${not #lists.isEmpty(#fields.errors('email'))} ? is-invalid" 负责发生这种情况。（我是 Spring 和 Thymeleaf 的新手，因此可能会有更简洁的代码）
_forms.scss 中的声明 .form-control.is-invalid~.invalid-feedback 将启动并将 display: block 分配给 <div class="invalid-feedback">，从而显示每个字段的错误消息。李>

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

嗨

【讨论】：