web-dev-qa-db-fra.com

Bootstrap 4 saisie de formulaire avec icône pour validation

Dans Bootstrap 3, il y avait des icônes facultatives pour chacun des états de validation. L'icône apparaîtrait dans le côté droit de l'entrée en utilisant le has-feedback, has-success, has-danger, etc ... cours.

enter image description here Comment puis-je obtenir cette même fonctionnalité dans Bootstrap 4 en utilisant le valid-feedback ou invalid-feedback Des classes?

csstwitter-bootstrapvalidationbootstrap-4font-awesome
9
Zim

Bootstrap 4 n'inclut pas d'icônes (les glyphicons ont disparu), et il n'y a maintenant que 2 états de validation (is-valid Et is-invalid) Qui contrôlent l'affichage des valid-feedback Et invalid-feedback Texte.

Avec un peu de CSS supplémentaire, vous pouvez positionner une icône à l'intérieur de l'entrée (à droite) et contrôler son affichage en utilisant is-valid Ou is-invalid Sur l'entrée form-control. Utilisez une bibliothèque de polices comme fontawesome pour les icônes. J'ai créé une nouvelle classe feedback-icon Que vous pouvez ajouter au 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>

Démo des icônes de validation d'entrée
Démo avec validation de travail

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

Notez que le contenant form-group Est position:relative.

6
Zim

Les icônes de validation des formulaires sont intégrées Bootstrap 4.3.1, voir la documentation ici: https://getbootstrap.com/docs/4.3/components/forms/#custom-styles

Pour une validation côté client, vous pouvez utiliser le plugin ParsleyJS. Voir une démo ici: https://jsfiddle.net/djibe89/tu0ap111/

Fake code
2
djibe