Bootstrap 4 form input with icon for validation

12
votes

In Bootstrap 3 there were optional icons for each of the validation states. The icon would appear in the right side of the input using the has-feedback, has-success, has-danger, etc... classes.

enter image description here How can I get this same functionality in Bootstrap 4 using the valid-feedback or invalid-feedback classes?

3
csstwitter-bootstrapvalidationbootstrap-4font-awesome

3 Answers

7
votes

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>

Notice that the containing form-group is position:relative using the position-relative class.

2
votes

Form validation icons are built-in Bootstrap 4.3.1, see documentation here : https://getbootstrap.com/docs/4.3/components/forms/#custom-styles

For a client-side validation, you can use ParsleyJS plugin. See a demo here : https://jsfiddle.net/djibe89/tu0ap111/

Fake code
0
votes

a simple way to do it with bootstrap 4 is:

<div class="input-group mb-3 border border-success"> 
              <input type="text" class="form-control border-0" aria-label="Amount (to the nearest dollar)">
              <div class="input-group-append">
                <span class="input-group-text bg-white border-0 text-success"><span class="iconify" data-icon="subway:tick" data-inline="true"></span></span>
              </div>
            </div>

obviously you have to include 

<script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>