Tutorial Bootstrap: Cara Membuat Validasi Form pada Bootstrap 5

Form Validation atau validasi formulir merupakan sebuah metode yang digunakan untuk memberikan keterangan valid atau tidaknya formulir yang akan disubmit oleh user.

Dalam hal ini, valid atau tidaknya isian form yang akan disubmit sudah ditentukan sebelumnya oleh pembuat form (server) dengan menggunakan program JavaScript.

Misal, field username tidak boleh kosong, Password harus berisi minimal 8 karakter yang terdiri dari huruf kapital, angka, dan karakter lainnya, dsb.

Hal di atas merupakan contoh penerapan validasi form, yang dimana sangatlah membantu dari sisi client (user) dan juga dari sisi server.

Sebagai seorang client, kita langsung dapat merevisi isian formulir apabila terjadi kesalahan input, tanpa harus mengulang pengisian formulir dari awal.

Sebagai seorang server, kita tidak perlu repot-repot memberi tahu client apabila terjadi salah input formulir.

Didalam Bootstrap sendiri, sudah menyediakan berbagai style model Form-Validation, salah satunya yaitu Custom styles, Browser default, dan juga Supported elements.

Langsung saja kita mulai dari yang pertama.

1. Custom styles

Pada custom styles ini, kita harus menambahkan properti class .needs-validation dan juga atribut novalidate didalam tag <form>.

Selanjutnya, didalam tag <input>, kita harus menambahkan attribut required yang bertujuan untuk mewajibkan user mengisi field tersebut.

Perhatikan program berikut.

		 	
    <div class="container rounded-3 bg-secondary-subtle p-4 border border-black">
      <form class="needs-validation" novalidate>
        <div class="mb-3">
          <label class="form-label" for="uname">Username</label>
          <input type="text" class="form-control" id="uname" required>
          <div class="valid-feedback">Good !</div>
          <div class="invalid-feedback">Fill the field correctly !!</div>
        </div>
        <div class="mb-3">
          <label class="form-label" for="pwd">Password</label>
          <input type="password" class="form-control" id="pwd" required>
          <div class="valid-feedback">Good !</div>
          <div class="invalid-feedback">Fill the field correctly !!</div>
        </div>
        <div class="form-check mb-3">
          <input type="checkbox" class="form-check-input" id="cbox" required>
          <label class="form-check-label" for="c-box">I agree Terms and Services</label>
          <div class="invalid-feedback">You must check the box !!</div>
        </div>
        <div>    
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>

Untuk properti :valid-feedback dan juga :invalid-feedback bersifat opsional, kita dapat mengisinya atau tidak.

Ini akan memberikan keterangan kepada user ketika input yang kita isikan valid, maka akan menampilkan pesan :valid-feedback dan begitu juga sebaliknya.

Akan menghasilkan output.

Pada custom styles ini, ketika kita men-Submit tanpa mengisi semua field form, maka pesan :invalid-feedback akan ditampilkan secara langsung disemua field tersebut.

2. Browser defaults

Browser default merupakan style validasi form yang umum digunakan.

Berbeda cara mengvalidasi dengan style yang pertama tadi.

Pada browser defaults ini, ketika terjadi kesalahan mengisi form, validasi akan dilakukan satu-persatu.

Perhatikan program berikut.

		 	
    <div class="container rounded-3 bg-secondary-subtle p-4 border border-black">
      <form>
        <div class="mb-3">
          <label class="form-label" for="uname">Username</label>
          <input type="text" class="form-control" id="uname" required>
          <div class="valid-feedback">Good !</div>
          <div class="invalid-feedback">Fill the field correctly !!</div>
        </div>
        <div class="mb-3">
          <label class="form-label" for="pwd">Password</label>
          <input type="password" class="form-control" id="pwd" required>
          <div class="valid-feedback">Good !</div>
          <div class="invalid-feedback">Fill the field correctly !!</div>
        </div>
        <div class="form-check mb-3">
          <input type="checkbox" class="form-check-input" id="cbox" required>
          <label class="form-check-label" for="c-box">I agree Terms and Services</label>
          <div class="invalid-feedback">You must check the box !!</div>
        </div>
        <div>    
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>

Menghasilkan tampilan sebagai berikut.

Coba submit form tanpa mengisi fieldnya.

3. Supported elements

Pada supported elements, ketika field form terdeteksi invalid, maka secara langsung akan muncul pesan error atau :invalid-feedback.

Begitu pula sebaliknya, apabila field form valid, maka secara real-time akan mengembalikan pesan valid.

Didalam tag <form>, kita berikan properti class .was-validated yang berarti telah divalidasi sebelumnya (sebelum disubmit).

Perhatikan program berikut.

		 	
    <div class="container rounded-3 bg-secondary-subtle p-4 border border-black">
      <form class="was-validated">
        <div class="mb-3">
          <label class="form-label" for="uname">Username</label>
          <input type="text" class="form-control" id="uname" required>
          <div class="valid-feedback">Good !</div>
          <div class="invalid-feedback">Fill the field correctly !!</div>
        </div>
        <div class="mb-3">
          <label class="form-label" for="pwd">Password</label>
          <input type="password" class="form-control" id="pwd" required>
          <div class="valid-feedback">Good !</div>
          <div class="invalid-feedback">Fill the field correctly !!</div>
        </div>
        <div class="form-check mb-3">
          <input type="checkbox" class="form-check-input" id="cbox" required>
          <label class="form-check-label" for="c-box">I agree Terms and Services</label>
          <div class="invalid-feedback">You must check the box !!</div>
        </div>
        <div>    
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>

Menghasilkan output.

Itulah tadi contoh pembuatan validasi form sederhana didalam Bootsrtap 5. Untuk membuat validasi form yang lebih kompleks misalnya menampilkan input bertipe radio, select, email, number, textarea, dll. caranya sama seperti contoh diatas, yaitu wajib dengan menambahkan atribut required pada setiap tag <input>-nya.

Bootstrap