Why is Bootstrap 4 Beta .invalid-feedback displaying when field is valid?

user_4198841 0
Viewed 6966

I have a form that I'm using with Bootstrap 4 beta form validation. It works nicely except for the invalid-feedback class. The feedback div displays correctly at first like so:

enter image description here

But when I make the field valid, the field is highlighted in green but the invalid-feedback div isn't hidden.

enter image description here

I followed the HTML as in the docs:

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

When the user submits the form, the below JavaScript function is executed.

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')
}

And the form is indeed valid in the picture above, and the POST is happening, but the feedback text is still visible...

bootstrap-4
1 Answers

I'm having the same issue. Apparently it's a known bug with BS 4.0.0beta according to this issue on Bootstrap's GitHub Issue Tracker.

There is already a patch merged, but it will only be released together with the second beta, which will probably take some weeks.

In the meantime, you can apply the fix yourself on the mixins/_form.scss file, or if you prefer or need to simply override the wrong rule, you can do this:

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

The first rule will override and make sure the invalid stuff remains hidden when the input is valid, and the second rule shows the valid feedback and tooltips when the input is valid.

Please note that this monstrosity of CSS comes directly from the compiled Bootstrap from their CDN, you can always remove the selectors you're not using to make this smaller, but the best way is always to edit the source SASS files. I needed to do it this way because I'm using the CDN and only have the minified CSS to work with.

user_7530120
Related