不需要输入时，Bootstrap表单验证会以绿色突出显示标签文本吗? [英] Bootstrap Form Validation Highlighting Label Text in Green When Input is Not Required?

问题描述

我的 Bootstrap 4表单验证验证表单后，带有两个单选按钮的标签的前景变为绿色.如果表单无效，则标签不会更改为红色.无论哪种方式，它们都应保留其黑色前景，因为单选按钮输入不像我的其他表单元素那样具有与它们关联的required属性.为什么它们会变成绿色，我怎么能防止这种情况或停止在这两个实体上进行表单验证?

I have a weid thing happening with my Bootstrap 4 form validation where with two radio buttons have their label's foreground being changed to green when the form is validated. If the form is invalid, the labels don't change to red. Either way, they should persist their black foreground because the radio button inputs do not have the required attribute associated with them like my other form elements. Why would they turn green and how may I prevent this or stop form validation from occurring on these two entities?

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="[e-mail]" 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')
  })
})

结果

表单验证之前

表单验证后

推荐答案

使用HTML5验证表单时，将:valid状态(或验证失败时为:invalid)应用于所有表单输入.我不知道一种防止:valid状态应用于特定输入的方法.

When the form is validated with HTML5, the :valid state (or :invalid on validation failure) is applied to all of the form inputs. I don't know of a way to prevent the :valid state from being applied to specific inputs.

将:valid应用于输入后，Bootstrap就会使用此CSS，从而使标签变为绿色...

Once :valid has been applied to the input, Bootstrap has this CSS which makes the label green...

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

要覆盖Bootstrap应用的绿色样式，请在标签上使用text-dark类.这样，标签将始终为黑色，而不是绿色(:valid)或红色(:invalid).

To override the green style that Bootstrap is applying, use the text-dark class on the label. This way the label will always be black, and not green(:valid) or red(:invalid).

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> 

这篇关于不需要输入时，Bootstrap表单验证会以绿色突出显示标签文本吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！