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>

我尝试了几种样式，比如help-block但是没办法。

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

有什么想法吗？

由于

Answer 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
提交表单后，如果出现错误，将重新呈现该表单，并由开发人员提供一种机制，该机制将在每个{{的is-invalid属性中包含class 1}}并显示错误。在前面的代码中，<input class="form-control"/>是导致这种情况的原因。（我是Spring和Thymeleaf的新手，所以可能会有更整洁的代码）

_ems_forms.scss

声明th:classappend="${not #lists.isEmpty(#fields.errors('email'))} ? is-invalid"将开始并将.form-control.is-invalid~.invalid-feedback分配给display: block，从而显示每个字段的错误消息（s）。

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

HIH

使用百日咳和引导程序在验证表单上未应用样式

1 个答案: