Doesn't work with inputs nested inside .form-group > .input-group.

[trusktr]

I'm using Bootstrap 4 alpha.

When I have something like the following, it works fine:

<form role="form" data-toggle="validator">

  <div class="form-group">
    <label class="font-weight-bold">Password</label>
    <input
      type="password"
      class="form-control"
      name="password"
      id="password"
      data-minlength="6"
      required
    >
    <small class="help-block">Minimum of 6 characters</small>
  </div>

</form>

But when I move the input into a .input-group, there is no longer any validation, it just stops working:

<form role="form" data-toggle="validator">

  <div class="form-group">
    <label class="font-weight-bold">Password</label>
    <div class="input-group" component="showHidePassword">
      <input
        type="password"
        class="form-control"
        name="password"
        id="password"
        data-minlength="6"
        required
      >
      <span class="input-group-btn" v-on:click="clickShowHide">
        <button class="btn btn-secondary" type="button">
          <span v-show="hidden">Show</span>
          <span v-show="!hidden">Hide</span>
        </button>
      </span>
    </div>
    <small class="help-block">Minimum of 6 characters</small>
  </div>

</form>

[trusktr]

So when there is .form-group > input it works fine, but doesn't work at all with .form-group > .input-group > input.

[bomshteyn]

@trusktr Were you able to find a solution?

[Rhonln]

I have the same problem, how did you solve it?

[trusktr]

I think I just re-structured my forms.​