Bootstrap-4验证：添加边框和背景色以形成输入组

debugcn 发表于 Dev

像素保罗

我有一个使用Bootstrap 4的表单。显示验证错误时，我希望包含input-group（Password）的文本字段能够像上面的（Username）文本字段一样，将红色边框和背景色应用于整个宽度。有没有办法做到这一点？

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

阿克伯·伊克巴尔

让该类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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。