Bootstrap 5 Form Validation

Formuliervalidatie

verschillende validatieklassen gebruiken om de gebruiker waardevolle feedback te bieden. Voeg .was-validated of .needs-validation toevoegen aan het <form>-element, afhankelijk van of je de validatiefoutmeldingen voordat of na het indienen van het formulier wilt tonen. De invoervelden zullen een groene (geldig) of rode (ongeldig) rand hebben om aan te geven wat er ontbreekt in het formulier. Je kunt ook .valid-feedback of .invalid-feedback meldingen om de gebruiker duidelijk te laten weten wat er ontbreekt, of wat er gedaan moet worden voordat het formulier wordt ingediend.

voorbeeld

In dit voorbeeld gebruiken we .was-validated Geef aan wat er ontbreekt:

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">Gebruikersnaam:</label>
    <input type="text" class="form-control" id="uname" placeholder="Voer een gebruikersnaam in" name="uname" required>
    <div class="valid-feedback">Geldig.</div>
    <div class="invalid-feedback">Vul dit veld in.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Wachtwoord:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Voer een wachtwoord in" name="pswd" required>
    <div class="valid-feedback">Geldig.</div>
    <div class="invalid-feedback">Vul dit veld in.</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">Ik ga akkoord met deze voorwaarden.</label>
    <div class="valid-feedback">Geldig.</div>
    <div class="invalid-feedback">Selecteer dit keuzevak om door te gaan.</div>
  </div>
  <button type="submit" class="btn btn-primary">Indienen</button>
</form>

Probeer het zelf