Invalid feedback is invisible

[esl51]

Invalid feedback is invisible because there is no input with is-invalid class near it. Initialization:

echo $form->field($model, 'autocomplete')->widget(Typeahead::class, [
    'dataset' => [[
        'remote' => [
            'url' => Url::toRoute(['site/autocomplete']) . '?term=%QUERY',
            'wildcard' => '%QUERY'
        ],
        'display' => 'value',
        'limit' => 10,
    ]],
]);

With ajax validation on blur I have the following markup:

<div class="form-group required validating">
  <label for="...">Label</label>
  <div>
    <span class="twitter-typeahead" style="...">
      <input type="text" class="form-control tt-hint" ...>
      <input id="..." type="text" class="form-control tt-input is-invalid" ...>
    </span>
    ...
  </div>
  <div class="invalid-feedback">The field is required.</div>
</div>

Bootstrap 4 rules:

.invalid-feedback {
  display: none;
}
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.