Validación de formulario Bootstrap 5

Validación de formulario

Puede usar diferentes clases de validación para proporcionar retroalimentación valiosa al usuario. Por favor, agregue .was-validated o .needs-validation agregar a los elementos <form> según si desea proporcionar retroalimentación de validación antes o después de enviar el formulario. Los campos de entrada tendrán un borde verde (válido) o rojo (inválido) para indicar el contenido que falta en el formulario. También puede agregar .valid-feedback o .invalid-feedback mensajes para informar claramente al usuario sobre lo que falta o lo que debe completarse antes de enviar el formulario.

Ejemplo

En este ejemplo, utilizamos antes de enviar el formulario .was-validated Indique lo que falta:

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">Nombre de usuario:</label>
    <input type="text" class="form-control" id="uname" placeholder="Por favor, ingrese el nombre de usuario" name="uname" required>
    <div class="valid-feedback">Válido.</div>
    <div class="invalid-feedback">Por favor, complete este campo.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Contraseña:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Por favor, ingrese la contraseña" name="pswd" required>
    <div class="valid-feedback">Válido.</div>
    <div class="invalid-feedback">Por favor, complete este campo.</div>
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="myCheck" name="remember" required>
    <label class="form-check-label" for="myCheck">Acepto estos términos.</label>
    <div class="valid-feedback">Válido.</div>
    <div class="invalid-feedback">Marque esta casilla para continuar.</div>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Prueba por ti mismo