web-dev-qa-db-ja.com

Bootstrap 4検証用アイコン付きフォーム入力

Bootstrap 3では、検証状態ごとにオプションのアイコンがありました。アイコンは、has-feedback、has-success、has-dangerなどのクラスを使用して、入力の右側に表示されます。

enter image description herevalid-feedbackまたはinvalid-feedbackクラスを使用してBootstrap 4でこの同じ機能を取得するにはどうすればよいですか？

csstwitter-bootstrapvalidationbootstrap-4font-awesome
9
Zim

ブートストラップ4にはアイコンが含まれておらず（グリフィコンは削除されています）、is-validおよびis-invalidの表示を制御する2つの検証状態（valid-feedbackおよびinvalid-feedback）があります。テキスト。

少し余分なCSSを使用すると、アイコンを入力内（右側）に配置し、is-valid入力でis-invalidまたはform-controlを使用してその表示を制御できます。アイコンには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>

入力検証アイコンのデモ
検証が有効なデモ

.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であることに注意してください。

6
Zim

フォーム検証アイコンは組み込みですBootstrap 4.3.1、こちらのドキュメントを参照してください： https://getbootstrap.com/docs/4.3/components/forms/#custom-styles

クライアント側の検証には、ParsleyJSプラグインを使用できます。こちらのデモをご覧ください： https://jsfiddle.net/djibe89/tu0ap111/

Fake code
2
djibe