样式未应用于使用百里香叶和引导程序的验证表单

Question

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

这是表单的一部分：

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

我已经尝试了几种样式，例如帮助块，但没有办法。

我正在使用引导4.0.0-alpha.6

知道吗？

谢谢

Answer 1

如果您仍然感兴趣。

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标签也适用于<div class="invalid-feedback">)

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

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

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

嗨