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="[email protected]" 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')
  })
})

Result

Before form validation

After form validation

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="[email protected]" 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')
  })
})

Result

Before form validation

After form validation

• javascript
• html
• twitter-bootstrap
• validation
• bootstrap-4

Share Improve this question Follow asked Feb 15, 2018 at 19:46 MatthewMatthew 4,0661717 gold badges7070 silver badges132132 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

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;
}

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