Validasi Form Bootstrap 5

Validasi Formulir

Anda dapat menggunakan kelas validasi yang berbeda untuk memberikan umpan balik yang berharga kepada pengguna. Silakan gunakan .was-validated atau .needs-validation tambahkan ke elemen <form>, tergantung apakah Anda ingin memberikan umpan balik validasi sebelum atau setelah mengirimkan formulir. Bidang masukan akan memiliki garis pinggir hijau (berlaku) atau merah (tidak berlaku) untuk menunjukkan konten yang kurang di formulir. Anda juga dapat menambahkan .valid-feedback atau .invalid-feedback pesan, untuk memberikan informasi jelas kepada pengguna tentang apa yang kurang, atau apa yang perlu selesai sebelum mengirimkan formulir.

contoh

Dalam contoh ini, kami menggunakan .was-validated Indikasikan apa yang kurang:

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">Nama Pengguna：</label>
    <input type="text" class="form-control" id="uname" placeholder="Masukkan nama pengguna" name="uname" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Isi bidang ini.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Sandi：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Masukkan sandi" name="pswd" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Isi bidang ini.</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">Saya setuju dengan syarat ini.</label>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Pilih kotak ini untuk melanjutkan.</div>
  </div>
  <button type="submit" class="btn btn-primary">Kirim</button>
</form>

Coba Sendiri