Muwanafunzi wa Chaguo cha Kichagua cha Kichagua cha Kichagua cha Bootstrap 5

Uharibifu wa Forrm

kutumia kasi kwa uharibifu wa forrm, tafadhali ingiza .was-validated au .needs-validation kuingiza <form> ya kuzingatia maelezo ya uharibifu wa upimaji, kufikia kwa kuzingatia maelezo ya upimaji kabla au baada ya kumuomba forma. Inafikia kiwango cha mabara kwa mabati ya kijani (kuvuma) au kijani (hatuwezekani) kuzingatia matokeo ya forma. Wewe wengi waweza kuongeza .valid-feedback au .invalid-feedback inaangalia jumuija, ili kuzingatia kwamba tunapoteza nini, au tunahitaji kumaliza nini kabla ya kumuomba forma.

Mifano

Kwa hili matokeo hii, tunatumia .was-validated Tafadhali ingie kumtaarifu yote ambayo inahitaji kusababisha:}}

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">Jina la mtumiaji:</label>
    <input type="text" class="form-control" id="uname" placeholder="Tafadhali ingiza jina la mtumiaji" name="uname" required>
    <div class="valid-feedback">Hakikisho.</div>
    <div class="invalid-feedback">Tafadhali jumaa kufikia hii jini.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Nifasi:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Tafadhali ingiza nifasi" name="pswd" required>
    <div class="valid-feedback">Hakikisho.</div>
    <div class="invalid-feedback">Tafadhali jumaa kufikia hii jini.</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">Ninianzisha kwa hizi kwanza.</label>
    <div class="valid-feedback">Hakikisho.</div>
    <div class="invalid-feedback">Chagua hiki chuki kufuata.</div>
  </div>
  <button type="submit" class="btn btn-primary">Kushajwa</button>
</form>

Jifunze tena