Membuat Form Validation dengan Bootstrap 4

Membuat Form Validation dengan Bootstrap 4

loading....

Tau gak klo bootstrap 4 bisa mevalidasi sebuah form sebelum. Keuntungan validasi dengan bootstrap adalah mengurangi beban server untuk lakukan validasi pada aplikasi yang server side seperti php/asp karena validasi menggunakan bootstrap itu di eksekusi di client.

Langkah Membuat validasi form dengan bootstrap 4

  1. buat lah form nya terlebih dahulu dan isinkan field field form yang akan di validasi
    					<form class="container" id="fbiodata" novalidate method="post">
       					  <div class="form-row p-1">
    						<div class="col ">
    						  <input type="text" class="form-control form-control-sm" placeholder="Nama" id="nama" name="nama" required>
    						</div>					
    					  </div>
    					  <div class="form-row p-1">
    						<div class="col">
    						  <input type="url" class="form-control form-control-sm" placeholder="Url" id="url" name="url">
    						</div>
    						<div class="col">
    						  <input type="email" class="form-control form-control-sm" placeholder="Email" id="email" name="email" required>
    						</div>						  
    					  </div>
    					  <div class="form-row p-1">
    						<div class="col">
    						  <textarea class="form-control form-control-sm" id="biodata" name="biodata" rows="3" placeholder="biodata" required></textarea>
    						</div>
    					  </div>
    					  <div class="form-row p-1">
    						<div class="col">
    						  <button type="submit" class="btn btn-outline-primary btn-sm">Post</button>
    						</div>
    					  </div>
    					</form>​

    Contoh kode form di atas mengandung input yang bertipe text,url,email dan text area. 

  2. setelah itu masukan java script nya
    <script>
    
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
      "use strict";
      
      window.addEventListener("load", function() {
        var form = document.getElementById("fbiodata");
        form.addEventListener("submit", function(event) {
          if (form.checkValidity() == false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add("was-validated");
        }, false);
      }, false);
    }());
    </script>​

    contoh kode javascript di atas akan memvalidasi form dengan id fbiodata. antara form dan javascript nya harus sesuai id nya.

  3. Masukan required pada input yang diperlukan atau wajib diisi.
  4. Jika semua sudah selesai maka kita tinggal mengetes nya
  5. jika masih bingung kamu bisa datang saja langsung ke halaman resmi form bootstrap 4.
Demo Bootstrap form validation

Artikel Menarik Lainnya
Bootstrap, Bootstrap 4

loading...