Form Handling dan Validasi di JavaScript

Dalam tutorial kali ini kita akan membahasa tentang form handling dan validasi di JavaScript. Form handling berarti cara JavaScript memproses data yang dimasukkan pengguna melalui form HTML, seperti nama, email, atau password. Sedangkan validasi adalah proses memastikan bahwa data tersebut sudah benar sebelum dikirim ke server.

Dengan JavaScript, kita bisa memeriksa apakah kolom sudah diisi, format email valid, atau password memenuhi aturan, semuanya langsung di sisi browser tanpa reload halaman.

1. Membuat Form HTML Sederhana

Contoh struktur dasar form:

<form id="myForm">
  <label>Nama:</label>
  <input type="text" id="nama" placeholder="Masukkan nama" />

  <label>Email:</label>
  <input type="email" id="email" placeholder="Masukkan email" />

  <label>Password:</label>
  <input type="password" id="password" placeholder="Masukkan password" />

  <button type="submit">Kirim</button>
</form>

<p id="message"></p>

2. Menangani Submit Form dengan JavaScript

Kita bisa menambahkan event listener agar form tidak langsung dikirim sebelum dicek:

const form = document.getElementById("myForm");
const message = document.getElementById("message");

form.addEventListener("submit", function (e) {
  e.preventDefault(); // mencegah reload halaman

  const nama = document.getElementById("nama").value.trim();
  const email = document.getElementById("email").value.trim();
  const password = document.getElementById("password").value.trim();

  // Panggil fungsi validasi
  if (validateForm(nama, email, password)) {
    message.textContent = "Form berhasil dikirim!";
    message.style.color = "green";
  }
});

3. Fungsi Validasi Data

Berikut contoh validasi dasar:

function validateForm(nama, email, password) {
  if (nama === "" || email === "" || password === "") {
    alert("Semua kolom wajib diisi!");
    return false;
  }

  // Validasi format email dengan regex sederhana
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailPattern.test(email)) {
    alert("Format email tidak valid!");
    return false;
  }

  // Validasi panjang password
  if (password.length < 6) {
    alert("Password minimal 6 karakter!");
    return false;
  }

  return true;
}

Penjelasan:

• Mengecek apakah semua kolom sudah diisi.

• Memastikan email memiliki format benar (mengandung @ dan .).

• Memastikan password cukup panjang.

4. Memberikan Feedback ke Pengguna

Kamu juga bisa menampilkan pesan kesalahan langsung di halaman, bukan lewat alert().

function showError(msg) {
  const message = document.getElementById("message");
  message.textContent = msg;
  message.style.color = "red";
}

Lalu ganti alert() dengan showError("Pesan error...").

5. Studi Kasus: Validasi Email & Password

Contoh mini form login:

<form id="loginForm">
  <input type="email" id="loginEmail" placeholder="Email" />
  <input type="password" id="loginPass" placeholder="Password" />
  <button type="submit">Login</button>
  <p id="notif"></p>
</form>

<script>
  const loginForm = document.getElementById("loginForm");
  const notif = document.getElementById("notif");

  loginForm.addEventListener("submit", (e) => {
    e.preventDefault();

    const email = document.getElementById("loginEmail").value;
    const pass = document.getElementById("loginPass").value;

    if (email === "" || pass === "") {
      notif.textContent = "Email dan Password wajib diisi!";
      notif.style.color = "red";
      return;
    }

    if (!email.includes("@")) {
      notif.textContent = "Format email salah!";
      notif.style.color = "red";
      return;
    }

    notif.textContent = "Login berhasil!";
    notif.style.color = "green";
  });
</script>

Kesimpulan

Dengan JavaScript, kamu bisa melakukan form handling dan validasi langsung di browser untuk meningkatkan pengalaman pengguna. Kelebihannya:

• Tidak perlu reload halaman.

• Memberikan umpan balik cepat.

• Mengurangi beban server.

Pelajari validasi yang lebih kompleks seperti pengecekan kekuatan password, konfirmasi password, atau integrasi API untuk validasi real-time agar websitemu semakin profesional.