CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapvalidationbootstrap-4
Matthew
Matthew

Reputation: 4056

Bootstrap Form Validation Highlighting Label Text in Green When Input is Not 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="[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

enter image description here

After form validation

enter image description here

Upvotes: 4

Views: 4916

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

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

Upvotes: 5

Related Questions