样式不应用于使用百里香和自举程序的验证表单

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>

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

我正在使用bootstrap4.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. 表单被提交，如果有错误，它将被重新呈现，并由开发人员提供一种机制，该机制将在每个<input class="form-control"/>的class属性中包含is-invalid错误。 在前面的代码中， th:classappend="${not #lists.isEmpty(#fields.errors('email'))} ? is-invalid"导致这种情况发生。 （我是Spring和Thymeleaf的新手，因此可能会有更整洁的代码）
3. 声明.form-control.is-invalid~.invalid-feedback在_forms.scss将踢和分配display: block到<div class="invalid-feedback">因此显示出每个字段的错误消息（一个或多个）。

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

HIH