Cara Membuat Form Validasi jQuery Langkah demi Langkah

Seorang pengguna mengisi form pendaftaran, mengosongkan kolom nama, mengetik “asdf” di email, lalu menekan tombol kirim. Server menerima data sampah dan kamu harus membersihkannya manual. Validasi di sisi klien mencegah hal ini terjadi sebelum data meninggalkan browser. Artikel ini membahas cara membuat form validasi jQuery langkah demi langkah, mulai dari struktur HTML sampai pengecekan saat form dikirim.

Menyiapkan Struktur HTML Form

Mulai dari markup yang mudah dijangkau selector. Setiap kolom punya pembungkus sendiri supaya pesan error bisa ditempatkan dekat kolomnya.

<form id="form-daftar" novalidate>
  <div class="baris">
    <label for="nama">Nama</label>
    <input type="text" id="nama" name="nama">
    <span class="pesan"></span>
  </div>
  <div class="baris">
    <label for="email">Email</label>
    <input type="text" id="email" name="email">
    <span class="pesan"></span>
  </div>
  <div class="baris">
    <label for="sandi">Kata Sandi</label>
    <input type="password" id="sandi" name="sandi">
    <span class="pesan"></span>
  </div>
  <button type="submit">Daftar</button>
</form>

Atribut novalidate mematikan validasi bawaan browser. Kamu ingin mengendalikan sendiri kapan pesan muncul dan bagaimana tampilannya, jadi biarkan browser diam.

Menangkap Event Submit

Validasi berjalan saat tombol kirim ditekan. Pasang handler pada form, bukan pada tombolnya, karena pengguna juga bisa mengirim dengan menekan Enter.

$(function () {
  $('#form-daftar').on('submit', function (e) {
    e.preventDefault();
    console.log('form dikirim');
  });
});

e.preventDefault() menahan pengiriman sungguhan selama pengecekan belum selesai. Kalau kamu baru mengenal pola ini, event submit punya perilaku bawaan yang perlu dipahami sebelum menimpanya.

Membuat Fungsi Pengecekan Per Kolom

Urai validasi menjadi fungsi kecil yang mengembalikan true atau false. Cara ini membuat aturan tiap kolom mudah diubah tanpa menyentuh logika form secara keseluruhan.

function cekKosong(nilai) {
  return nilai.trim() !== '';
}

function cekEmail(nilai) {
  var pola = /^[^s@]+@[^s@]+.[^s@]+$/;
  return pola.test(nilai);
}

function cekSandi(nilai) {
  return nilai.length >= 8;
}

Ekspresi reguler untuk email di atas bukan standar resmi, hanya penyaring kasar untuk menangkap salah ketik yang jelas. Pengecekan email yang benar-benar ketat tetap dilakukan di server.

Menampilkan Pesan Error di Bawah Kolom

Setiap kolom punya elemen .pesan kosong. Isi atau kosongkan elemen itu sesuai hasil pengecekan, sekaligus beri penanda pada pembungkusnya.

function tampilkanError($baris, teks) {
  $baris.addClass('error');
  $baris.find('.pesan').text(teks);
}

function bersihkanError($baris) {
  $baris.removeClass('error');
  $baris.find('.pesan').text('');
}

Satu kelas CSS untuk .baris.error cukup mengubah warna border dan teks pesan. Pisahkan urusan tampilan dari urusan aturan validasi supaya kode tidak bercampur.

Menggabungkan Semuanya di Handler Submit

Sekarang handler memanggil pengecekan satu per satu. Hitung jumlah kesalahan dan hentikan pengiriman bila masih ada.

$('#form-daftar').on('submit', function (e) {
  e.preventDefault();
  var salah = 0;

  var $barisNama = $('#nama').closest('.baris');
  var nilaiNama = $('#nama').val();
  if (!cekKosong(nilaiNama)) {
    tampilkanError($barisNama, 'Nama wajib diisi');
    salah++;
  } else {
    bersihkanError($barisNama);
  }

  var $barisEmail = $('#email').closest('.baris');
  var nilaiEmail = $('#email').val();
  if (!cekEmail(nilaiEmail)) {
    tampilkanError($barisEmail, 'Format email tidak valid');
    salah++;
  } else {
    bersihkanError($barisEmail);
  }

  var $barisSandi = $('#sandi').closest('.baris');
  var nilaiSandi = $('#sandi').val();
  if (!cekSandi(nilaiSandi)) {
    tampilkanError($barisSandi, 'Kata sandi minimal 8 karakter');
    salah++;
  } else {
    bersihkanError($barisSandi);
  }

  if (salah === 0) {
    this.submit();
  }
});

Perhatikan this.submit() di baris akhir. Memanggil method DOM langsung melewati handler jQuery, jadi form benar-benar terkirim tanpa memicu validasi berulang. Kalau kamu memakai $(this).submit(), handler akan jalan lagi dan pengiriman tidak pernah terjadi.

Memvalidasi Saat Pengguna Mengetik

Menunggu sampai tombol kirim ditekan terasa lambat. Tambahkan pengecekan pada event blur supaya pengguna tahu kesalahannya begitu berpindah kolom.

$('#email').on('blur', function () {
  var $baris = $(this).closest('.baris');
  if (cekEmail($(this).val())) {
    bersihkanError($baris);
  } else {
    tampilkanError($baris, 'Format email tidak valid');
  }
});

Event blur lebih hemat daripada keyup. Memeriksa setiap ketikan membuat pesan error berkedip saat pengguna baru mengetik satu huruf. Pengecekan saat kolom ditinggalkan memberi jeda yang wajar. Animasi jQuery bisa dipakai untuk memunculkan pesan dengan fade singkat, asal durasinya pendek agar tidak mengganggu.

Daftar Periksa Sebelum Form Dipakai

• Validasi server tetap ada. Pengecekan di browser bisa dilewati dengan mematikan JavaScript.
• Atribut name pada setiap input terisi, karena data itulah yang dikirim ke server.
• Pesan error menjelaskan apa yang salah, misalnya “Kata sandi minimal 8 karakter” ketimbang “Input tidak valid”.
• Kolom yang sudah benar dibersihkan dari pesan lama, jangan biarkan error menumpuk.
• Tombol kirim dinonaktifkan selama proses pengiriman untuk mencegah klik ganda.

Kalau form bertambah panjang, memecah kode ke beberapa fungsi seperti di atas menjaga file tetap terbaca. Prinsip yang sama dibahas lebih luas di panduan menulis kode jQuery yang rapi.

Validasi form jQuery yang baik terdiri dari event submit yang ditahan, fungsi pengecekan per kolom, dan pesan error yang ditempatkan dekat inputnya. Bangun satu langkah setiap kali, uji di browser, lalu lanjut ke kolom berikutnya.

Pertanyaan yang Sering Diajukan

Apakah validasi jQuery cukup tanpa validasi di server?

Tidak. Pengguna bisa mematikan JavaScript atau mengirim data langsung ke endpoint. Validasi di browser berfungsi memberi respons cepat, sedangkan server tetap wajib memeriksa ulang semua data yang masuk.

Kenapa form tidak terkirim setelah validasi lolos?

Penyebab paling sering adalah memanggil $(this).submit() di dalam handler submit. Panggilan itu memicu handler lagi tanpa henti. Pakai this.submit() agar method DOM asli yang dijalankan.

Bagaimana cara memvalidasi banyak kolom tanpa menulis kode berulang?

Simpan aturan tiap kolom dalam objek, misalnya pasangan id input dan fungsi pengecekannya. Lalu ulangi dengan $.each() untuk menjalankan semua aturan. Pola perulangan ini dibahas di perbandingan each(), for, dan map().