Bootstrap-4 form-Eingang mit dem Symbol für die Validierung

In Bootstrap 3 gab es optional die Symbole für die Validierung Staaten. Das Symbol in der rechten Seite der Eingang mit der has-feedback, has-success, has-danger usw... Klassen.

Bootstrap-4 form-Eingang mit dem Symbol für die Validierung
Wie kann ich diese Funktionalität in der Bootstrap-4 valid-feedback oder invalid-feedback Klassen?

InformationsquelleAutor Zim | 2018-03-16
  1. 7

    Bootstrap-4 nicht enthalten icons (glyphicons sind verschwunden), und jetzt sind es nur noch 2 Validierung Staaten (is-valid und is-invalid), die Steuerung der Anzeige des valid-feedback und invalid-feedback text.

    Mit ein wenig extra CSS positionieren Sie ein Symbol innerhalb des input (rechts), und der Kontrolle Ihrer' display mit is-valid oder is-invalid auf die form-control Eingang. Verwenden Sie eine schriftart lib wie fontawesome für die Symbole. Ich habe eine neue feedback-icon Klasse, die Sie hinzufügen können, um die 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 der input-Validierung Ikonen

    Demo mit arbeiten validation

    CSS:

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

    HTML:

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

    Beachten Sie, dass die mit form-group ist position:relative.

    InformationsquelleAutor Zim
  2. 2

    Formular-Validierung icons built-in Bootstrap 4.3.1, Dokumentation ist hier zu sehen : https://getbootstrap.com/docs/4.3/components/forms/#custom-styles

    Für eine client-seitige Validierung, die Sie verwenden können, ParsleyJS plugin.
    Sehen Sie eine demo hier : https://jsfiddle.net/djibe89/tu0ap111/

    Fake code
    InformationsquelleAutor djibe
Schreibe einen Kommentar