Kamu menekan tombol daftar, form tidak bergerak, dan tidak ada pesan apa pun yang muncul. Setelah diperiksa, ternyata input email sudah terisi tetapi kolom nama masih kosong. Pengguna sering kebingungan karena aturan validasi tersebar di beberapa tempat, sebagian di HTML, sebagian di JavaScript, tanpa satu sumber kebenaran. Validasi form dengan jQuery bisa dibuat lebih rapi kalau kita menetapkan satu pola sejak awal.
Kenapa Validasi Form Perlu Satu Sumber Aturan
Validasi yang tersebar menimbulkan tiga masalah umum: pesan error muncul di tempat berbeda, aturan yang sama ditulis dua kali, dan tombol submit tetap aktif meski ada kolom yang belum valid. Pola yang lebih sehat adalah menyimpan aturan dalam satu objek JavaScript, lalu membiarkan fungsi render yang mengurus tampilan pesan.
Satu sumber aturan juga memudahkan pengujian. Kalau logika validasi terpisah dari manipulasi DOM, kamu bisa memanggilnya dari konsol tanpa harus membuka browser penuh. Aturan yang sama dapat dipakai di sisi server sebagai lapisan kedua, meski implementasinya berbeda bahasa.
Struktur HTML yang Bersih
Mulai dari markup dulu. Setiap field punya name yang unik, label yang terhubung lewat atribut for, dan satu elemen kosong untuk menampung pesan error. Jangan menaruh pesan error di dalam atribut title atau placeholder karena keduanya tidak dapat diandalkan untuk aksesibilitas.
<form id="daftar" novalidate>
<div class="field">
<label for="nama">Nama lengkap</label>
<input id="nama" name="nama" type="text">
<span class="error" data-for="nama"></span>
</div>
<div class="field">
<label for="email">Email</label>
<input id="email" name="email" type="email">
<span class="error" data-for="email"></span>
</div>
<button type="submit">Daftar</button>
</form>Atribut novalidate mematikan validasi bawaan browser supaya pesan yang muncul konsisten. Kalau kamu ingin tetap memakai validasi native sebagai cadangan, hilangkan atribut itu, tetapi siapkan penanganan pesan yang menyatu dengan gaya situs.
Menulis Aturan Validasi di Satu Objek
Aturan disimpan sebagai objek dengan key sesuai nama field. Setiap aturan berisi fungsi pemeriksa dan pesan kesalahan. Struktur ini membuat penambahan field baru hanya perlu satu baris.
const aturan = {
nama: {
cek: v => v.trim().length >= 3,
pesan: 'Nama minimal 3 karakter.'
},
email: {
cek: v => /^[^s@]+@[^s@]+.[^s@]+$/.test(v),
pesan: 'Format email belum benar.'
}
};Fungsi cek tidak menyentuh DOM sama sekali. Ia hanya menerima nilai dan mengembalikan boolean. Pemisahan ini membuat pengujian menjadi sepele dan menghindari efek samping yang sulit dilacak.
Mengikat Event dengan Event Delegation
Alih-alih memasang handler pada setiap input, pasang satu handler di form. jQuery menyediakan mekanisme ini lewat on('input', selector, handler). Pendekatan tersebut juga berguna kalau nanti ada field yang ditambahkan secara dinamis.
$('#daftar').on('input blur', 'input, textarea', function () {
const nama = $(this).attr('name');
if (!aturan[nama]) return;
const valid = aturan[nama].cek($(this).val());
$(`.error[data-for="${nama}"]`).text(valid ? '' : aturan[nama].pesan);
$(this).toggleClass('invalid', !valid);
});Event blur dipakai supaya pengguna yang meninggalkan kolom langsung tahu ada masalah, sementara input memastikan pesan hilang begitu kesalahan diperbaiki. Kombinasi keduanya cukup untuk sebagian besar form.
Menangani Submit dan Menandai Field Pertama yang Bermasalah
Submit adalah momen paling penting. Jangan hanya mencegah pengiriman; beri tahu pengguna apa yang harus diperbaiki. Fungsi berikut memeriksa seluruh aturan, menampilkan pesan, dan memindahkan fokus ke field pertama yang gagal.
$('#daftar').on('submit', function (e) {
let adaMasalah = false;
let fieldPertama = null;
Object.keys(aturan).forEach(function (nama) {
const $input = $(`[name="${nama}"]`);
const valid = aturan[nama].cek($input.val());
$(`.error[data-for="${nama}"]`).text(valid ? '' : aturan[nama].pesan);
if (!valid) {
adaMasalah = true;
if (!fieldPertama) fieldPertama = $input;
}
});
if (adaMasalah) {
e.preventDefault();
fieldPertama.focus();
}
});Mengarahkan fokus ke field pertama yang bermasalah membantu pengguna keyboard dan pembaca layar. Tanpa langkah ini, pengguna harus mencari sendiri kolom mana yang salah.
Pola Validasi Lanjutan
Setelah dasar terbentuk, beberapa pola berikut sering dibutuhkan. Terapkan secara bertahap sesuai kebutuhan form yang sedang kamu bangun.
- Validasi lintas field: bandingkan isi dua input, misalnya konfirmasi kata sandi, lewat aturan yang menerima objek nilai keseluruhan.
- Validasi asinkron: periksa apakah username sudah terpakai dengan permintaan ke server. Tampilkan status menunggu sebelum hasil datang supaya pengguna tidak menekan submit berkali-kali.
- Format khusus: gunakan regex terpisah untuk nomor telepon Indonesia, kode pos, atau NIK. Jangan memaksakan satu regex untuk banyak format.
- Debounce: tunda pemeriksaan asinkron beberapa ratus milidetik setelah pengguna berhenti mengetik untuk mengurangi beban server.
Kalau form kamu mengambil data pilihan dari API, mengombinasikan validasi dengan pengambilan data akan lebih mudah jika input dan tabel dikelola terpisah. Cara menampilkan data API ke tabel HTML dengan jQuery yang pernah dibahas di situs ini bisa jadi referensi untuk memisahkan lapisan data dan tampilan.
Pesan Error yang Tidak Menyebalkan
Pesan error yang panjang di bawah setiap kolom membuat form terasa penuh. Beberapa kebiasaan berikut lebih ramah pengguna:
- Fokuskan pesan pada tindakan yang harus dilakukan, bukan pada kesalahan. Tulis “Masukkan email yang valid”, bukan “Input tidak sesuai format” yang tidak menjelaskan apa pun.
- Tampilkan pesan setelah pengguna selesai mengetik, bukan saat masih mengetik huruf pertama.
- Gunakan warna dan ikon sebagai penanda sekunder. Jangan mengandalkan warna saja karena sebagian pengguna tidak dapat membedakannya.
- Sembunyikan pesan error saat nilai sudah valid tanpa animasi berlebihan.
Validasi yang baik terasa seperti asisten yang mengingatkan, bukan penjaga pintu yang membentak.
Ringkasan
Validasi form dengan jQuery menjadi lebih mudah dirawat ketika aturan dikumpulkan di satu tempat, event dipasang lewat delegation, dan pesan error dikelola secara konsisten. Mulai dari struktur HTML yang bersih, lanjutkan dengan objek aturan, lalu hubungkan ke event input dan submit. Setelah pola ini berjalan, menambah field baru hanya butuh beberapa baris, bukan penulisan ulang seluruh logika.
Pertanyaan yang Sering Diajukan
Apakah masih perlu validasi di sisi server jika sisi klien sudah ketat?
Ya, tetap perlu. Validasi sisi klien dapat dilewati dengan mematikan JavaScript atau mengirim permintaan langsung. Validasi sisi server adalah lapisan keamanan yang harus ada, sementara validasi klien berfungsi memberi umpan balik cepat kepada pengguna.
Bagaimana cara menampilkan pesan error tanpa mengganggu tata letak?
Sediakan ruang tetap untuk elemen pesan, misalnya dengan min-height pada pembungkus field. Dengan begitu, munculnya pesan tidak menggeser elemen di bawahnya. Alternatif lain adalah menampilkan pesan dalam tooltip yang muncul di dekat field, meski pendekatan ini menuntut pengelolaan posisi tambahan.
Apakah perlu library validasi terpisah?
Untuk form sederhana, menulis aturan sendiri dengan jQuery biasanya cukup dan lebih ringan. Library terpisah mulai berguna ketika kamu menghadapi banyak bahasa pesan, aturan bersyarat yang rumit, atau butuh integrasi dengan kerangka kerja tertentu.
