Bootstrap 5 formulärvalidering

Formulärvalidering

Du kan använda olika valideringsklasser för att ge användaren värdefull feedback. Vänligen lägg till .was-validated eller .needs-validation att lägga till till <form>-elementet, beroende på om du vill ge valideringsfeedback innan eller efter att formuläret skickas in. Inmatningsfält kommer att ha en grön (giltig) eller röd (ogiltig) kant för att indikera vad som saknas i formuläret. Du kan också lägga till .valid-feedback eller .invalid-feedback meddelanden för att tydligt informera användaren om vad som saknas eller vad som behöver göras innan formuläret skickas in.

exempel

I detta exempel använder vi .was-validated Indikera vad som saknas:

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">Användarnamn:</label>
    <input type="text" class="form-control" id="uname" placeholder="Ange användarnamn" name="uname" required>
    <div class="valid-feedback">Giltigt.</div>
    <div class="invalid-feedback">Fyll i detta fält.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Lösenord:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Ange lösenord" name="pswd" required>
    <div class="valid-feedback">Giltigt.</div>
    <div class="invalid-feedback">Fyll i detta fält.</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">Jag godkänner dessa villkor.</label>
    <div class="valid-feedback">Giltigt.</div>
    <div class="invalid-feedback">Markera denna kryssruta för att fortsätta.</div>
  </div>
  <button type="submit" class="btn btn-primary">Skicka</button>
</form>

Prova själv