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

Question

我有一个用于 Bootstrap 4 beta form validation 的表单。除了invalid-feedback 类之外，它工作得很好。反馈 div 一开始正确显示如下：

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

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

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

当用户提交表单时，会执行下面的 JavaScript 函数。

signup () {
  let form = document.getElementById('needs-validation')

  if (form.checkValidity()) {
    axios.post('http://localhost:3000/accounts', this.user).then(response => {
      console.log(response)
    }).catch(error => {
      console.log(error)
    })
  }

  form.classList.add('was-validated')
}

而且上图中的表单确实有效，并且正在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 可以使用。