CARA MEMBUAT VALIDASI FORM DENGAN JAVASCRIPT

Validasi form adalah hal yang penting dalam pembuatan situs web untuk memvalidasi inputan dari pengguna. JavaScript memiliki fungsionalitas yang memungkinkan untuk melakukan validasi form dengan cara yang cepat dan mudah dibandingkan dengan bahasa lain. Berikut adalah cara membuat validasi form dengan menggunakan JavaScript.

Langkah Pertama: Membuat Form HTML

Sebelum membuat validasi dengan JavaScript, kamu perlu untuk membuat sebuah form HTML terlebih dahulu. Form HTML ini nantinya akan di validasi oleh JavaScript. Berikut adalah contoh membuat form HTML:

<form id="formInput">
  <label for="nama">Nama:</label><br>
  <input type="text" id="nama" name="nama"><br>
  <label for="email">Email:</label><br>
  <input type="text" id="email" name="email">
  <input type="submit" value="Submit">
</form>

Langkah Kedua: Menambahkan Event Listener

Setelah form dibuat, kamu perlu menambahkan event listener pada form tersebut yang akan memanggil fungsi validasi ketika form disubmit. Berikut adalah contohnya:

document.getElementById('formInput').addEventListener('submit', validasiForm);

Langkah Ketiga: Membuat Fungsi Validasi

Selanjutnya, kamu akan membuat fungsi validasi. Fungsi ini akan melakukan pengecekan pada setiap inputan melalui kondisi yang telah ditentukan. Berikut adalah contoh membuat fungsi validasi:

function validasiForm(event) {
  event.preventDefault();

  var nama = document.getElementById('nama').value;
  var email = document.getElementById('email').value;

  if(nama == "") {
    alert("Nama tidak boleh kosong");
    return false;
  }

  if(email == "") {
    alert("Email tidak boleh kosong");
    return false;
  }

  alert("Form berhasil disubmit");
  return true;
}

Kode di atas secara sederhana melakukan pengecekan jika inputan nama atau email kosong maka akan menampilkan pesan bahwa inputan tersebut tidak boleh kosong. Jika semua inputan sudah diisi maka form akan dikatakan berhasil disubmit.

Demikian cara membuat validasi form dengan JavaScript. Dengan JavaScript, kamu bisa melakukan validasi form dengan lebih mudah dan efisien. Sehingga, kualitas situs web yang kamu buat akan menjadi lebih baik dan user-friendly.