html - Bootstrap-4 验证 : Add border and background-color to form input-group

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 成为您的指南...然后检查 sibling 和它的 child 做您的自定义样式

$(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>