跳过某些Bootstrap 4输入的验证反馈

Question

通过遵循有关表单验证的Bootstrap文档，我可以验证我的表单，但是我还没有找到一种方法使特定字段（例如，文本输入或复选框）不会显示验证反馈，而所有其他字段都会显示。

我的意思是：如何使某些特定字段在验证表单时跳过获取:valid或:invalid伪类，或者即使确实将伪类应用于它们，我如何才能将它们从视觉上跳过，使其与其他字段一样？

也许有一类与之相反的类.was-validated可以应用于特定领域？

引导程序版本：v4.0.0-beta.3

Answer 1

因为默认情况下不需要的字段是有效的您可以:valid通过添加到输入.form-control类来创建覆盖伪类，例如：no-validate

如果您正在使用 npm 并且正在导入 boostrap，则可以使用 bootstrap 变量

.form-control.no-validate:valid {
    border-color: $input-border-color;
    padding: $input-padding-x;
    background: $input-bg;
}

如果没有，您可以只添加默认值：

.form-control.no-validate:valid {
    border-color: #ced4da;
    padding-right: .75rem;
    background: none;
}

Answer 2

你可以加.was-validated到要显示验证的输入的父元素。

\n\n

例如，如果您将输入放入 a 中，div并使用.form-group您可以执行以下操作：

\n\n

 <div class="form-group was-validated">\n   <label for="formGroupExampleInput">Example label</label>\n   <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">\n  </div>\n

\n\n

如果任何父元素具有该类，则验证样式适用.was-validated，\xe2\x80\x99 的父元素是否具有该类并不重要.was-validated是表单并不重要。我可以\xe2\x80\x99t 看到它的记录，但它会改变，因为 Bootstrap CSS 避免针对特定的 HTML 元素。

\n