membuat validasi form menggunakan bootstrap

Bootstrap adalah kerangka kerja CSS populer yang digunakan oleh banyak pengembang web untuk mengembangkan desain responsif dan mudah digunakan. Salah satu fitur utama Bootstrap adalah kemampuannya untuk membantu pengembang membuat formulir validasi dengan mudah.

Validasi form adalah proses memeriksa apakah data yang dimasukkan ke dalam formulir sesuai dengan format yang diharapkan. Dalam hal ini, validasi form menggunakan Bootstrap dapat membantu memastikan bahwa data yang dimasukkan ke dalam formulir sesuai dengan aturan yang telah ditentukan.

Berikut adalah langkah-langkah untuk membuat validasi form menggunakan Bootstrap:

Buat elemen form HTML dengan menggunakan Bootstrap.

php
<form class="form" role="form">
  <div class="form-group">
    <label for="inputName">Nama</label>
    <input type="text" class="form-control" id="inputName" placeholder="Masukkan Nama" required>
  </div>
  <div class="form-group">
    <label for="inputEmail">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Masukkan Email" required>
  </div>
  <div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Masukkan Password" required>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Tambahkan atribut required pada input yang wajib diisi.

php
<form class="form" role="form">
  <div class="form-group">
    <label for="inputName">Nama</label>
    <input type="text" class="form-control" id="inputName" placeholder="Masukkan Nama" required>
  </div>
  <div class="form-group">
    <label for="inputEmail">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Masukkan Email" required>
  </div>
  <div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Masukkan Password" required pattern=".{6,}">
    <small class="form-text text-muted">Password minimal 6 karakter</small>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Tambahkan atribut pattern pada input yang memerlukan format khusus.

php
<form class="form" role="form">
  <div class="form-group">
    <label for="inputName">Nama</label>
    <input type="text" class="form-control" id="inputName" placeholder="Masukkan Nama" required>
  </div>
  <div class="form-group">
    <label for="inputEmail">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Masukkan Email" required>
  </div>
  <div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Masukkan Password" required pattern=".{6,}">
    <small class="form-text text-muted">Password minimal 6 karakter</small>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Tambahkan pesan kesalahan menggunakan Bootstrap.

python
<form class="form" role="form">
  <div class="form-group">
    <label for="inputName">Nama</label>
    <input type="text" class="form-control" id="inputName" placeholder="Masukkan Nama" required>
    <div class="invalid-feedback">Nama harus diisi</div>
  </div>
  <div class="form-group">
    <label for="inputEmail">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Masukkan Email" required>
    <div class="invalid-feedback">Email harus diisi</div>
  </div>
  <div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Masukkan Password" required pattern=".{6,}">
    <div class="invalid-feedback">Password minimal 6 karakter</div>
    <small class="form-text text-muted">Password minimal 6 karakter</small>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Tambahkan script JavaScript untuk menangani validasi form.

php
<script>
  // Dapatkan semua form yang memerlukan validasi
  var forms = document.getElementsByClassName('form');

  // Loop melalui setiap form dan tambahkan event listener submit
  for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener('submit', function(event) {
      // Dapatkan semua input pada form saat ini
      var inputs = this.getElementsByTagName('input');
      // Loop melalui setiap input dan validasi
      for (var j = 0; j < inputs.length; j++) {
        // Jika input tidak valid, beri tahu pengguna dengan menampilkan pesan kesalahan
        if (!inputs[j].checkValidity()) {
          event.preventDefault();
          inputs[j].classList.add('is-invalid');
          inputs[j].nextElementSibling.style.display = 'block';
        }
      }
    });
  }
</script>

Dengan demikian, kita telah berhasil membuat validasi form menggunakan Bootstrap. Ketika pengguna mencoba mengirimkan formulir tanpa memenuhi persyaratan validasi, maka akan muncul pesan kesalahan yang diatur dalam elemen invalid-feedback. Pesan kesalahan akan muncul pada setiap input yang tidak valid.

membuat validasi form menggunakan bootstrap

Komentar

Categories