Unable to use .is-valid or .is-invalid on nested .form-control(s)

Created by: leaski

Using a simple layout as the below:

<div class="form-group">
  <input type="text" class="form-control">
  <span>.</span>
  <input type="text" class="form-control">
</div>

the .is-valid or .is-invalid class must currently be applied to every form-control element

I would suggest that the validation selector should include .is-valid or .is-invalid on a form-group and apply the styling to nested .form-control(s)