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

o2rvlv0m 于 2023-05-02 发布在 Bootstrap

关注(0)|答案(3)|浏览(186)

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

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

css

来源：https://stackoverflow.com/questions/49323175/bootstrap-4-form-input-with-icon-for-validation

3条答案

按热度按时间

sshcrbum1#

Bootstrap 4不包括图标（glyphicons消失了），现在只有2个验证状态（is-valid和is-invalid）控制valid-feedback和invalid-feedback文本的显示。

使用一点额外的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类。

赞(0）回复(0）举报 2023-05-02

7nbnzgx92#

使用Bootstrap 4的一个简单方法是使用程式化的input groups：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css">
<script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>

<div class="input-group m-3 w-75 border border-success rounded"> 
  <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>

<div class="input-group m-3 w-75 border border-danger rounded"> 
  <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-danger"><span class="iconify" data-icon="subway:multiply-1" data-inline="true"></span></span>
  </div>
</div>

显然，您必须包括图标才能显示：

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

赞(0）回复(0）举报 2023-05-02

lb3vh1jj3#

表单验证图标是Bootstrap 4内置的。3.1，请参阅此处的文档： www.example.com
对于客户端验证，您可以使用ParsleyJS插件。在这里看一个demo：https://jsfiddle.net/djibe89/tu0ap111/

Fake code

赞(0）回复(0）举报 2023-05-02

我来回答

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

3条答案

相关问题

热门标签

最新问答