Membuat Form Validation dengan Bootstrap

Membuat Form Validation dengan Bootstrap - Form Validation atau yang kita sebut Validasi masukan adalah sebuah fitur yang memungkinkan kita untuk memberitahukan user bahwa suatu form atau lembar pada sebuah website harus diisi / wajib diisi. Form Validation ini sangat penting keberadaanya, mengingat akan sangat membantu user mempermudah mengisi sebuah form.

Selain dari segi user, dari segi sistem juga akan sangat penting. Karena setiap form memiliki aturannya sendiri. Ada data yang harus diisi / wajib diisi oleh user untuk disimpan ke database, dan ada juga form yang bersifat opsional.

Dan kali ini, kita akan membuat sebuah form validation sederhana dengan menggunakan Bootstrap. Sehingga form yang akan kita buat ini akan sangat user friendly dengan adanya feedback yang muncul ketika user tidak memberi inputan pada form ataupun sudah memberikan input pada form. Yuk kita mulai saja tutorialnya.

Pertama, kita buka dulu code editor. Sobat bisa menggunakan sublime text atau visual studio code, atau yang lainnya.

Kedua, kita buat sebuah folder untuk menyimpan data file.html yang akan dibuat. Sobat buat bebas saja ya sesuai keinginan. Ini karena contoh yang akan kita buat itu sederhana untuk mengetahui fungsi-fungsinya, kita simpan saja di desktop. Pada contoh diberi nama valid.

Ketiga, setelah itu, kita buka code editor (pada contoh digunakan sublime text). Kita buat sebuah file.html di dalam folder valid dengan nama pagevalidation.html dan sobat ketikkan code berikut didalamnya.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contoh Form Validation</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <h2>Form Validation</h2>
      <p>Halo cobat ketutrare, yuk kali ini kita belajar menggunakan form validate dari bootstrap. Simak contoh berikut ya :</p>
	  <form action="action_page.html" class="was-validated" method="get">
	    <div class="form-group">
	      <label for="uname">Username:</label>
	      <input type="text" class="form-control" id="uname" placeholder="Ketik username" name="uname" required>
	      <div class="valid-feedback">Username Valid</div>
	      <div class="invalid-feedback">maaf, Username tidak boleh kosong !</div>
	    </div>
	    <div class="form-group">
	      <label for="pwd">Password:</label>
	      <input type="password" class="form-control" id="pwd" placeholder="Ketik password" name="pswd" required>
	      <div class="valid-feedback">Password Valid</div>
	      <div class="invalid-feedback">Maaf, Password tidak boleh kosong !</div>
	    </div>
	    <div class="form-group form-check">
	      <label class="form-check-label">
	        <input class="form-check-input" type="checkbox" name="remember" required>Saya Bukan Robot
	        <div class="valid-feedback">Anda adalah Manusia</div>
	        <div class="invalid-feedback">Pastikan Anda Bukan Robot</div>
	      </label>
	    </div>
	    <button type="submit" class="btn btn-primary">Submit</button>
	  </form>
    </div>
  </div>
</div>

</body>
</html>

Pada code diatas, sobat perhatikan pada <div class="form-group"> di setiap inputnya kita berikan <input ... required >...</input>. Required ini berfungsi untuk memberitahukan user kalau field tidak boleh kosong, jadi kalau field kosong dan user mengklik Submit, maka akan muncul toltip error.

Perhatikan juga pada code :

<div class="valid-feedback">Password Valid</div>
<div class="invalid-feedback">Maaf, Password tidak boleh kosong !</div>

Pada code diatas, diberikan class valid-feedback dan invalid-feedback. Kalau valid-feedback itu akan memberikan tanda hijau pada form input ketika user benar / sudah memberi inputan, sedangkan untuk invalid-feedback itu akan memberikan warna merah ketika user belum memberikan inputan pada form.

Keempat, kita simpan codenya, dan kita jalankan programnya. Dan berikut ini adalah tampilannya. Pada form sobat perhatikan berwana merah bertanda form akan invalid ketika tidak mendapat inputan.

Sobat perhatikan juga pada checklist pada ahir form akan bertanda invalid juga ketika user belum mengkonfirmasi checklistnya.

Sekarang kita akan berikan inputan untuk masing-masing form dan checklist agar kita mengetahui perubahannya.

Oke sobat, kalau form sudah mendapatkan inputan, akan ada info / pemberitahuan jika username dan password valid, begitu juga dengan checklist.

lalu, bagaimana jika kita tidak memberikan inputan, dan langsung mengklik button Submit ? Maka akan mucul error pemberitahuan "Please Fill Out This Field". Ini adalah fungi dari required yang kita tambahkan pada setiap <input>.

Kelima, kita akan tambahkan sebuah halaman lagi. Jadi setelah kita klik Submit dan itu berhasil, maka kita akan diarahkan ke halaman berikutnya. Buat sebuah file.html dengan nama action_page.html.

Jadi pada <form action="action_page.html" ...> pada file pagevalidation.html kita panggil file action_page.html. Ini disesuaikan dengan milik sobat ya. Dan berikut ini adalah code di file action_page.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Congratulations</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-lg-6">
				<h1>SELAMAT </h1>
				<p>Kamu sudah berhasil menggunakan Form Validation Bootstrap</p>
				<a href="pagevalidation.html" class="btn btn-info">Kembali ke form</a>
			</div>
		</div>
		
	</div>
</body>
</html>

Kita save codenya, dan berikut ini adalah hasil ketika kita sudah mengklik submit dan tampilan halamannya.

Oke sobat, sekian dulu tutorial Cara Membuat Form Validation dengan Bootstrap. Semoga tutorial ini membantu sobat semua dalam belajar lebih banyak lagi dalam form validation bootstrap. Kalau ada pertanyaan, silahkan tuliskan di kolom komentar di bawah ya sobat. Terimakasih, salam Sidat.ID.

DOWNLOAD FILE TUTORIAL

Comentarios

Publicar un comentario

Si no puede verlo, puede ir a la pestaña Comentarios de CHAT para que podamos volver a subirlo.

Bienvenido a brindar críticas y sugerencias, siempre y cuando no use elementos de acoso y otros tipos de violencia. cuida tu habla y tus palabras, si eres un adulto. Bienvenido a comentar, cualquiera que sea su sugerencia sobre este blog, se lo agradezco.