Bootstrap-4 validation: Add border and background-color to form input-group

Question

I have a form using Bootstrap 4. When displaying validation errors, I would like the text field containing an input-group (Password) to get the red border and background color applied to the full width like the text field above (Username). Is there a way to achieve this?

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

Akber Iqbal · Accepted Answer · 2019-10-20 06:15:44Z

Let the class input-validation-error be your guide for this... and then check the sibling and its child to do your custom styling

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

Collectives™ on Stack Overflow

Bootstrap-4 validation: Add border and background-color to form input-group

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related