Bootstrap 5 formularvalidering

formularvalidering

du kan bruge forskellige valideringsklasser til at give brugeren værdifuld feedback. Sørg for at .was-validated eller .needs-validation til at tilføje til <form>-elementet, afhængigt af om du vil give feedback før eller efter at formularen sendes. Inputfeltene vil have en grøn (gyldig) eller rød (ugyldig) kant for at indikere manglende indhold i formularen. Du kan også tilføje .valid-feedback eller .invalid-feedback beskeder for at tydeligt informere brugeren om, hvad der mangler, eller hvad der skal fuldføres, før formularen sendes.

eksempel

I dette eksemplet bruger vi .was-validated Kom med og indikér, hvad der mangler:

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">Brugernavn:</label>
    <input type="text" class="form-control" id="uname" placeholder="Indtast brugernavn" name="uname" required>
    <div class="valid-feedback">Gyldig.</div>
    <div class="invalid-feedback">Fyld dette felt ud.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Adgangskode:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Indtast adgangskode" name="pswd" required>
    <div class="valid-feedback">Gyldig.</div>
    <div class="invalid-feedback">Fyld dette felt ud.</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">Jeg accepterer disse vilkår.</label>
    <div class="valid-feedback">Gyldig.</div>
    <div class="invalid-feedback">Vælg denne afkrydsningsfelt for at fortsætte.</div>
  </div>
  <button type="submit" class="btn btn-primary">Indsend</button>
</form>

Prøv det selv