Bootstrap 4 Form Input with Icon for Validation

Bootstrap 4 form input with icon for validation

Bootstrap 4 doesn't include icons (glyphicons are gone), and there are now just 2 validation states (is-valid and is-invalid) that control display of the valid-feedback and invalid-feedback text.

With a little extra CSS, you can position an icon inside the input (to the right), and control its' display using is-valid or is-invalid on the form-control input. Use a font lib like fontawesome for the icons. I created a new feedback-icon class that you can add to the valid/invalid-feedback.

.valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
    position: absolute;
    width: auto;
    bottom: 10px;
    right: 10px;
    margin-top: 0;
}

HTML

<div class="form-group position-relative">
     <label for="input2">Valid with icon</label>
     <input type="text" class="form-control is-valid" id="input2">
     <div class="valid-feedback feedback-icon">
          <i class="fa fa-check"></i>
     </div>
     <div class="invalid-feedback feedback-icon">
          <i class="fa fa-times"></i>
     </div>
</div>

Demo of input validation icons

Demo with working validation

.valid-feedback.feedback-icon,

.invalid-feedback.feedback-icon {

    position: absolute;

    width: auto;

    bottom: 10px;

    right: 10px;

    margin-top: 0;

}
<!DOCTYPE html>

<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

  <div class="form-group position-relative">

     <label for="input2">Valid with icon</label>

     <input type="text" class="form-control is-valid" id="input2">

     <div class="valid-feedback feedback-icon">

          <i class="fa fa-check"></i>

     </div>

     <div class="invalid-feedback feedback-icon">

          <i class="fa fa-times"></i>

     </div>

   </div>

</div>

Remove Bootstrap's validation icons

You can simply remove the icon by by setting the background property to none for that specific CSS class/pseudo-class

.was-validated .custom-select:valid {
  background-image: none;
}

.was-validated .custom-select:invalid {
  background-image: none;
}

If you would like to remove the validation icons, but retain the arrow icons on the select input, it can be achieved by setting the background to the following

.was-validated .custom-select:invalid {
     background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
}

Update for bootstrap 4:

Setting the background image to none for the particular selector retained the background color and the dropdown button.

.form-control.is-invalid{
    background-image: none;
}

Update for those working with Bootstrap's SASS/SCSS:

Please refer to PCalouche's excellent answer!

Search input with an icon Bootstrap

Bootstrap 5 Beta - (update 2021)

     <div class="input-group">
            <input class="form-control border-end-0 border rounded-pill" type="text" value="search" id="example-search-input">
            <span class="input-group-append">
                <button class="btn btn-outline-secondary bg-white border-start-0 border rounded-pill ms-n3" type="button">
                    <i class="fa fa-search"></i>
                </button>
            </span>
     </div>

Demo

Bootstrap 4 (original answer)

Why not use an input-group?

<div class="input-group col-md-4">
      <input class="form-control py-2" type="search" value="search" id="example-search-input">
      <span class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">
            <i class="fa fa-search"></i>
        </button>
      </span>
</div>

And, you can make it appear inside the input using the border utils...

        <div class="input-group col-md-4">
            <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
            <span class="input-group-append">
              <button class="btn btn-outline-secondary border-left-0 border" type="button">
                    <i class="fa fa-search"></i>
              </button>
            </span>
        </div>

Or, using a input-group-text w/o the gray background so the icon appears inside the input...

        <div class="input-group">
            <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
            <span class="input-group-append">
                <div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
            </span>
        </div>

Alternately, you can use the grid (row>col-) with no gutter spacing:

<div class="row no-gutters">
     <div class="col">
          <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
     </div>
     <div class="col-auto">
          <button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
             <i class="fa fa-search"></i>
          </button>
     </div>
</div>

Or, prepend the icon like this...

<div class="input-group">
  <span class="input-group-prepend">
    <div class="input-group-text bg-transparent border-right-0">
      <i class="fa fa-search"></i>
    </div>
  </span>
  <input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input" />
  <span class="input-group-append">
    <button class="btn btn-outline-secondary border-left-0 border" type="button">
     Search
    </button>
  </span>
</div>

Demo of all Bootstrap 4 icon input options

Sample Image

Example with validation icons

Change bootstrap form validate icons

Try custom background SVG image

CSS:

.form-control.is-valid,
.was-validated .form-control:valid {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 363.025 363.024' style='enable-background:new 0 0 363.025 363.024;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath style='fill:%2328a745;' d='M181.512,363.024C81.43,363.024,0,281.601,0,181.513C0,81.424,81.43,0,181.512,0 c100.083,0,181.513,81.424,181.513,181.513C363.025,281.601,281.595,363.024,181.512,363.024z M181.512,11.71 C87.88,11.71,11.71,87.886,11.71,181.513s76.17,169.802,169.802,169.802c93.633,0,169.803-76.175,169.803-169.802 S275.145,11.71,181.512,11.71z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpolygon style='fill:%2328a745;' points='147.957,258.935 83.068,194.046 91.348,185.767 147.957,242.375 271.171,119.166 279.451,127.445 '/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
}

How to change bootstrap validator icon position

You should ensure that you use Bootstrap v3.1.0 or later To use feedback icons then you can use this css. I have tested. it works here

.form-control-feedback{
  position:relative !important;
  float: left;
  left:5px;
  top:-3px !important;
}

bootstrap-validate: How can i enable validation in bootstrap4?

You need a few things in your code...

  • you got the condition correct, need to add/remove classes as a result of bootstrapValidate
  • import the icon library (i used font awesome v5)
  • in the classes you add/remove, you gotta place the icon for the check mark

UPDATE:
in light of questioner's comment of multiple fields in the form

Following code should help:

$(document).ready(function() {

  bootstrapValidate('#usr', 'min:5:Enter at least 5 characters!', function(isValid) {

    if (isValid) {

      $("#formHolder").addClass('validClass');

      $("#formHolder").removeClass('invalidClass');

    } else {

      $("#formHolder").addClass('invalidClass');

      $("#formHolder").removeClass('validClass');

    }

  });

  bootstrapValidate('#lastName', 'min:7:Enter at least 7 characters!', function(isValid) {

    if (isValid) {

      $("#formHolder2").addClass('validClass');

      $("#formHolder2").removeClass('invalidClass');

    } else {

      $("#formHolder2").addClass('invalidClass');

      $("#formHolder2").removeClass('validClass');

    }

  });

});
.validClass>input {

  border: 2px solid green;

}

.validClass .form-control:focus {

  border-color: green;

  box-shadow: 0 0 0 0.2rem rgba(33, 93, 30, 0.56)

}

.invalidClass>input,

.invalidClass .form-control:focus {

  border: 2px solid red;

}

.inputWrapper {

  display: inline-block;

  position: relative

}

.validClass:after {

  font-family: "Font Awesome 5 Free";

  content: "\f00c";

  visibility: visible;

  font-weight: 900;

  color: green;

  position: absolute;

  right: 6px;

  top: 55%;

}

.invalid-feedback {

  position: absolute;

  display: inline-block;

  bottom: -100px;

  left: 0px;

}

.submitBtn {

  margin-top: 20px;

}
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<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.0/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>

<script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js"></script>

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>

<div class="container mt-3">

  <form>

    <div class="form-group">

      <div class='inputWrapper invalidClass' id='formHolder'>

        <label for="usr">Name:</label>

        <input type="text" class="form-control " id="usr">

      </div>

      <br/>

      <div class='inputWrapper invalidClass' id='formHolder2'>

        <label for="lastName">last Name:</label>

        <input type="text" class="form-control " id="lastName">

      </div>

    </div>

    <button type="submit" class="btn btn-primary submitBtn">Submit</button>

  </form>

</div>

How to disable bootstrap 4 validation style from valid controls

I, for one, do not like overriding the CSS style so you could also choose to just specify which fields to validate instead of the entire form.

Add a class to your .form-group element (e.g. .validate-me)

    <form class="container needs-validation" novalidate>
        <div class="form-group row mt-5 validate-me">
            <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="Please enter your name" required />
                <div class="invalid-feedback">
                    Please enter the name.
                </div>
            </div>
        </div>
        <div class="form-group row mt-5">
            <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
            <div class="col-sm-10">
                <input type="tel" class="form-control" formnovalidate="formnovalidate" id="address" />
            </div>
        </div>
        <div class="form-group row">
            <input type="submit" class="btn btn-primary" style="width: 100px;" value="Save"/>
        </div>
    </form>

Now change your JavaScript slightly, retrieve all the form-groups with the validate-me class and instead of calling form.classList.add('was-validated') loop through all the captured form-groups and add was-validated to them instead.

window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');

                // Get all form-groups in need of validation
                var validateGroup = document.getElementsByClassName('validate-me');

                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }

                        //Added validation class to all form-groups in need of validation
                        for (var i = 0; i < validateGroup.length; i++) {
                            validateGroup[i].classList.add('was-validated');
                        }
                    }, false);
                });
            }, false);

Place green tick icon in angular control after validation

Yes, simple way is to use any icon library and theme color class which can help easily to add gree tick icon. <i class="bi bi-check"></i>.
[Bootstap icons link] https://icons.getbootstrap.com/icons/check/
But i would rather prefer a toast library to show a message. And prefer to use primeng toast library
[Link] http://primefaces.org/primeng/toast

Bootstrap 4 and form-control-feedback using icons

.fa-eraser {
  width: 15px;
  margin: -25px 10px;
  float: right;
}

set exact with on your fa icon right now you set the ico the same size as span text..

CodePen Here


Related Topics

How to Reset Default Button Style in Firefox 4 +

Are There Specific CSS Selectors Targeting Ie10

Position Element Over Background Image. But the Bg Img Changes Size with the Window. CSS

Using '-Webkit-Overflow-Scrolling: Touch' Hides Content While Scrolling/Dragging

How to Override the Minimum-Font-Size in Firefox

Stretch a Background Image in IE8

CSS Transition from 'Display: None' on Class Change

CSS Box-Shadow on Three Sides of a Div

What Is the Function of "Overlay" Value of "Overflow" Property

When Using Column-Count, Overflowing Content Completely Disappears in All But First Column, Why

Change Color of Select Component's Border and Arrow Icon Material Ui

Add Timestamps to Compiled SASS/Scss

Change Collapse Breakpoint in Bootstrap 3.0

* { Box-Sizing: Border-Box; }:To Border-Box or Not to Border-Box All Elements

How to Convert a Numeric Value into a Percentage (Or) Append Percentage Symbol to a Number

Background Gradients in IE7 with CSS

Bend a Div with CSS

Negative Top Margin Not Working in Ie 8 or 9


Leave a reply



Submit