Bootstrap 5-Formularvalidierung

Formularvalidierung

verschiedene Validierungsklassen verwenden, um den Benutzern wertvolle Feedbacks bereitzustellen. Bitte .was-validated oder .needs-validation hinzuzufügen zu <form>-Elementen, je nachdem, ob Sie die Validierung vor oder nach der Übermittlung des Formulars bereitstellen möchten. Die Eingabefelder werden eine grüne (gültig) oder rote (ungültig) Umrandung haben, um das fehlende Inhalt im Formular anzuzeigen. Sie können auch .valid-feedback oder .invalid-feedback Nachrichten, um den Benutzer klar zu informieren, was fehlt oder was vor der Übermittlung des Formulars erledigt werden muss.

Beispiel

In diesem Beispiel verwenden wir .was-validated Indizieren Sie, was fehlt:

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">Benutzername:</label>
    <input type="text" class="form-control" id="uname" placeholder="Geben Sie Ihren Benutzernamen ein" name="uname" required>
    <div class="valid-feedback">Gültig.</div>
    <div class="invalid-feedback">Füllen Sie dieses Feld aus.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Passwort:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Geben Sie Ihr Passwort ein" name="pswd" required>
    <div class="valid-feedback">Gültig.</div>
    <div class="invalid-feedback">Füllen Sie dieses Feld aus.</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">Ich stimme diesen Bedingungen zu.</label>
    <div class="valid-feedback">Gültig.</div>
    <div class="invalid-feedback">Markieren Sie dieses Kontrollkästchen, um fortzufahren.</div>
  </div>
  <button type="submit" class="btn btn-primary">Einreichen</button>
</form>

Versuchen Sie es selbst