当字段有效时，为什么Bootstrap 4 Beta .invalid-feedback显示？

Question

我有一个表格，我正在使用Bootstrap 4 beta form validation。除sudo lsof -t -i tcp:4201 | xargs kill -9 类外，它的效果很好。反馈div首先正确显示：

但是当我使该字段有效时，该字段以绿色突出显示，但invalid-feedback div未隐藏。

我按照文档中的HTML进行了操作：

invalid-feedback

当用户提交表单时，将执行以下JavaScript函数。

<form name="signup" id="needs-validation" novalidate>
  <h1 class="text-center">Signup</h1>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" maxlength="255" v-model="user.name" required>
    <small class="text-muted">Your full legal name.</small>
    <div class="invalid-feedback">
      Please enter your name.
    </div>
  </div>
...

表格在上图中确实有效，POST正在发生，但反馈文字仍然可见......

Answer 1

我有同样的问题。显然，根据this issue on Bootstrap's GitHub Issue Tracker，它是BS 4.0.0beta的已知错误。

There is already a patch merged，但它只会与第二个测试版同时发布，这可能需要数周时间。

与此同时，您可以在mixins / _form.scss文件中自行应用此修复程序，或者如果您更喜欢或只需要覆盖错误的规则，则可以执行以下操作：

.was-validated .form-control:valid ~ .invalid-feedback,
.was-validated .form-control:valid ~ .invalid-tooltip,
.form-control.is-valid ~ .invalid-feedback,
.form-control.is-valid ~ .invalid-tooltip,
.was-validated .custom-select:valid ~ .invalid-feedback,
.was-validated .custom-select:valid ~ .invalid-tooltip,
.custom-select.is-valid ~ .invalid-feedback,
.custom-select.is-valid ~ .invalid-tooltip {
  display: none;
}

.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-tooltip,
.form-control.is-valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-tooltip,
.was-validated .custom-select:valid ~ .valid-feedback,
.was-validated .custom-select:valid ~ .valid-tooltip,
.custom-select.is-valid ~ .valid-feedback,
.custom-select.is-valid ~ .valid-tooltip {
  display: block;
}

第一条规则将覆盖并确保输入有效时隐藏无效内容，第二条规则在输入有效时显示有效反馈和工具提示。

请注意，CSS的这种怪异性直接来自他们的CDN编译的Bootstrap，您可以随时删除您不使用的选择器来缩小它，但最好的方法是始终编辑源SASS文件。我需要这样做，因为我使用的是CDN，只有缩小的CSS才能使用。