Проверка Bootstrap-4: добавить рамку и цвет фона для формирования группы ввода

Question

У меня есть форма, использующая Bootstrap 4. При отображении ошибок проверки я хотел бы, чтобы текстовое поле, содержащее input-group (Пароль), получило красную рамку и цвет фона, примененные к полной ширине, как текстовое поле выше (Имя пользователя). Есть ли способ добиться этого?

<div class="form-group">
    <label>Username</label>
    <input class="form-control input-validation-error" type="text" id="Input_UserName" name="Input.UserName" value="">
    <span class="text-danger field-validation-error">Username is a required field</span>
</div>
<div class="form-group">
    <label>Password</label>
    <div class="input-group">
        <input type="password" class="form-control border-right-0 input-validation-error" data-password-input="toggle-password-view" id="Input_Password" name="Input.Password">
        <div class="input-group-append">
            <span class="input-group-text border-left-0 bg-transparent" data-view="toggle-password">
                <span id="password-toggle" class="small">show</span>
            </span>
        </div>
    </div>
    <span class="text-danger field-validation-error">Password is a required field</span>
</div>

Answer 1

Пусть класс input-validation-error будет вашим руководством для этого ... а затем проверьте родного брата и его ребенка, чтобы сделать ваш собственный стиль

$(document).ready(function() {
  $("input.input-validation-error").css('border', '1px solid red').css('background', 'pink');
  $("input.input-validation-error").siblings('.input-group-append').children('span').css('border', '1px solid red').css('padding', '0');
  $("input.input-validation-error").siblings('.input-group-append').children('span').children('span').css('background', 'pink').css('padding', '.525rem .75rem');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="form-group">
  <label>Username</label>
  <input class="form-control input-validation-error" type="text" id="Input_UserName" name="Input.UserName" value="">
  <span class="text-danger field-validation-error">Username is a required field</span>
</div>
<div class="form-group">
  <label>Password</label>
  <div class="input-group">
    <input type="password" class="form-control border-right-0 input-validation-error" data-password-input="toggle-password-view" id="Input_Password" name="Input.Password">
    <div class="input-group-append">
      <span class="input-group-text border-left-0 bg-transparent" data-view="toggle-password">
                <span id="password-toggle" class="small">show</span>
      </span>
    </div>
  </div>
  <span class="text-danger field-validation-error">Password is a required field</span>
</div>

<div class="form-group">
  <label>Password2</label>
  <div class="input-group">
    <input type="password" class="form-control border-right-0 " data-password-input="toggle-password-view" id="Input_Password" name="Input.Password">
    <div class="input-group-append">
      <span class="input-group-text border-left-0 bg-transparent" data-view="toggle-password">
                <span id="password-toggle" class="small">show</span>
      </span>
    </div>
  </div>

</div>