当不需要输入时，引导表单验证以绿色突出显示标签文本？答案

【问题标题】：Bootstrap Form Validation Highlighting Label Text in Green When Input is Not Required?当不需要输入时，引导表单验证以绿色突出显示标签文本？
【发布时间】：2018-02-15 19:46:30
【问题描述】：

我的Bootstrap 4 form validation 发生了一件奇怪的事情，其中两个单选按钮在验证表单时将其标签的前景更改为绿色。如果表单无效，标签不会变为红色。无论哪种方式，它们都应该保持黑色前景，因为单选按钮输入没有像我的其他表单元素那样与它们关联的required 属性。为什么它们会变成绿色，我该如何防止或停止在这两个实体上发生表单验证？

index.html

<form id="signup-form" novalidate>

<div class="form-group">
  <h1>Sign Up</h1>
  <p>Use this form to enter your name and email to sign up.</p>
</div>

<!-- Name -->
<div class="form-group">
  <div class="row">
    <div class="col">
      <label for="firstNameInput">Name</label>
      <input type="text" class="form-control" id="firstNameInput" placeholder="First name" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col">
      <label for="lastNameInput">Last</label>
      <input type="text" class="form-control" id="lastNameInput" placeholder="Last name" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
</div>

<!-- Email -->
<div class="form-group">
  <label for="emailAddressInput">Email address</label>
  <input type="email" class="form-control" id="emailAddressInput" aria-describedby="emailHelp" placeholder="name@example.com" required>
  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  <div class="invalid-feedback">
    Please provide a valid email.
  </div>
</div>

<!-- Options -->
<div class="form-group">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="Radios" id="type1RadioButton" value="option1" checked>
    <label class="form-check-label" for="type1RadioButton">
      Type 1 user
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="Radios" id="type2RadioButton" value="option2">
    <label class="form-check-label" for="type2RadioButton">
      Type 2 user
    </label>
  </div>
</div>

<!-- Submit Button -->
<div class="form-group">
  <a href="#" class="btn btn-primary" id="submitButton" type="submit">Submit</a>
</div>

</form>

script.js

$(document).ready(function() {
$("#submitButton").click(function() {

  //Fetch form to apply custom Bootstrap validation
  var form = $("#signup-form")
  alert(form.prop('id')) //test to ensure calling form correctly

  if (form[0].checkValidity() === false) {
    event.preventDefault()
    event.stopPropagation()
    }
    form.addClass('was-validated')
  })
})

结果

表单验证之前

表单验证后

【问题讨论】：

标签： javascript html twitter-bootstrap validation bootstrap-4

【解决方案1】：

当使用 HTML5 验证表单时，:valid 状态（或验证失败时的 :invalid）将应用于所有表单输入。我不知道有什么方法可以防止将 :valid 状态应用于特定输入。

一旦:valid 被应用于输入，Bootstrap 就会有这个 CSS 使标签变为绿色...

.was-validated .form-check-input:valid~.form-check-label {
    color: #28a745;
}

要覆盖 Bootstrap 应用的绿色样式，请在标签上使用 text-dark 类。这样标签将始终为黑色，而不是绿色（：有效）或红色（：无效）。

https://www.codeply.com/go/gvR4ArUPKL

  <div class="form-check">
       <input class="form-check-input" type="radio" name="Radios" id="type2RadioButton" value="option2">
       <label class="form-check-label text-dark" for="type2RadioButton">
          Type 2 user
       </label>
  </div>

【讨论】：