Saltar al contenido

Entrada de formulario Bootstrap 4 con icono para validación

Solución:

Bootstrap 4 no incluye íconos (los glifos se han ido), y ahora solo hay 2 estados de validación (is-valid y is-invalid) que controlan la visualización del valid-feedback y invalid-feedback texto.

Con un poco de CSS adicional, puede colocar un icono dentro de la entrada (a la derecha) y controlar su visualización usando is-valid o is-invalid sobre el form-control aporte. Utilice una biblioteca de fuentes como fontawesome para los iconos. Creé un nuevo feedback-icon clase que puede agregar a la 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>

Demostración de los iconos de validación de entrada
Demostración con validación de trabajo

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

Observe que el contenido form-group es position:relative utilizando el position-relative clase.

Los íconos de validación de formularios están integrados en Bootstrap 4.3.1, consulte la documentación aquí: https://getbootstrap.com/docs/4.3/components/forms/#custom-styles

Para una validación del lado del cliente, puede usar el complemento ParsleyJS. Vea una demostración aquí: https://jsfiddle.net/djibe89/tu0ap111/

Fake code
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *