Bootstrap 4 表单输入，带有用于验证的图标答案

【问题标题】：Bootstrap 4 form input with icon for validationBootstrap 4 表单输入，带有用于验证的图标
【发布时间】：2018-08-25 15:56:40
【问题描述】：

在 Bootstrap 3 中，每个验证状态都有可选图标。该图标将使用has-feedback、has-success、has-danger 等...类出现在输入的右侧。

如何使用 valid-feedback 或 invalid-feedback 类在 Bootstrap 4 中获得相同的功能？

【问题讨论】：

标签： css twitter-bootstrap validation bootstrap-4 font-awesome

【解决方案1】：

Bootstrap 4 不包含图标（字形图标已消失），现在只有 2 个验证状态（is-valid 和 is-invalid）控制 valid-feedback 和 @ 的显示987654326@文字。

使用一点额外的 CSS，您可以在输入端（右侧）放置一个图标，并在 form-control 输入端使用 is-valid 或 is-invalid 控制其显示。对图标使用 fontawesome 之类的字体库。我创建了一个新的feedback-icon 类，您可以将其添加到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>

注意包含form-group 是position:relative 使用position-relative 类。

【讨论】：

【解决方案2】：

表单验证图标是 Bootstrap 4.3.1 内置的，请参阅此处的文档：https://getbootstrap.com/docs/4.3/components/forms/#custom-styles

对于客户端验证，您可以使用 ParsleyJS 插件。在此处查看演示：https://jsfiddle.net/djibe89/tu0ap111/

Fake code

【讨论】：

【解决方案3】：

使用 bootstrap 4 的简单方法是：

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

显然你必须包括

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

【讨论】：