Materi #23 – JavaScript #1 – JavaScript – Belajar Coding

Materi JavaScript 6
Menangani Event dan Memvalidasi Form

oleh: Suryo Adhy Chandra, ST

Halaman web menjadi hidup ketika ia menanggapi perbuatan pengunjung: tombol ditekan, kolom diisi, form dikirim. Semua perbuatan itu disebut event, dan JavaScript bertugas menyiapkan apa yang harus dilakukan ketika event itu terjadi.

1. Memasang penanganan event

Cara yang dianjurkan adalah addEventListener. Perintah ini menerima dua hal: nama event yang ditunggu, dan fungsi yang dijalankan ketika event itu terjadi.

const tombol = document.querySelector("#tombol"); tombol.addEventListener("click", function () { alert("Tombol ditekan"); });

Perhatikan bahwa fungsinya tidak dipanggil saat itu juga. Kita hanya menitipkannya kepada browser, dan browser yang akan memanggilnya nanti ketika tombol benar-benar ditekan.

2. Event yang paling sering dipakai

click — elemen diklik, paling umum untuk tombol.
input — isi kolom berubah, terjadi setiap kali pengguna mengetik satu huruf.
change — isi kolom berubah dan pengguna sudah berpindah dari kolom itu.
submit — form dikirim, dipasang pada elemen form, bukan pada tombolnya.
keydown — sebuah tombol papan ketik ditekan.

3. Membaca isi kolom masukan

Isi sebuah kolom dibaca lewat sifat value. Perlu diingat, nilainya selalu berupa teks, meskipun yang diketik adalah angka.

const kolomNama = document.querySelector("#nama"); const kolomUmur = document.querySelector("#umur"); console.log(kolomNama.value); // teks console.log(Number(kolomUmur.value) + 1); // ubah dulu ke angka

Tanpa Number(), perintah kolomUmur.value + 1 akan menghasilkan penggabungan teks. Kalau pengguna mengetik 20, hasilnya menjadi "201", bukan 21. Ini salah satu jebakan JavaScript yang paling sering menjerat pemula.

4. Menahan pengiriman form

Secara bawaan, form yang dikirim akan memuat ulang halaman. Kalau kita ingin memeriksa isinya lebih dulu dengan JavaScript, perilaku bawaan itu perlu ditahan memakai preventDefault.

const form = document.querySelector("#form-daftar"); form.addEventListener("submit", function (event) { event.preventDefault(); // menahan pemuatan ulang halaman const nama = document.querySelector("#nama").value; console.log("Nama yang dikirim:", nama); });

5. Contoh utuh: form pendaftaran sederhana

Contoh berikut memeriksa tiga hal: nama tidak boleh kosong, umur harus berupa angka wajar, dan email harus memuat tanda at.

<form id="form-daftar"> <input type="text" id="nama" placeholder="Nama lengkap"> <input type="text" id="umur" placeholder="Umur"> <input type="text" id="email" placeholder="Email"> <button type="submit">Daftar</button> </form> <p id="pesan"></p>

Perhatikan pemakaian return setelah setiap pesan kesalahan. Perintah itu menghentikan fungsi supaya pemeriksaan berikutnya tidak dijalankan. Tanpa return, seluruh pemeriksaan tetap berjalan dan pesan terakhir akan menimpa pesan sebelumnya.

6. Fungsi trim dan mengapa penting

Perintah trim() membuang spasi di awal dan akhir teks. Ini penting karena pengguna sering tidak sengaja menekan spasi. Tanpa trim(), masukan berupa satu spasi akan dianggap terisi padahal sebenarnya kosong.

7. Validasi di browser bukan pengganti pemeriksaan di server

Ini yang paling sering disalahpahami. Validasi JavaScript berguna untuk memberi tanggapan cepat kepada pengguna, tetapi bukan alat keamanan. Siapa pun bisa mematikan JavaScript atau mengirim data langsung tanpa membuka halaman. Karena itu, setiap data yang masuk tetap wajib diperiksa ulang di sisi server.

Aturan praktisnya: validasi di browser untuk kenyamanan, validasi di server untuk keamanan. Keduanya diperlukan, dan tidak saling menggantikan.

8. Latihan

Buat kolom masukan dan satu paragraf. Setiap kali pengguna mengetik, paragraf menampilkan jumlah huruf yang sudah diketik. Gunakan event input.
Buat form berisi dua kolom angka dan tombol hitung, lalu tampilkan hasil penjumlahannya tanpa memuat ulang halaman.
Tambahkan pemeriksaan pada latihan kedua agar menolak masukan yang bukan angka.

Petunjuk untuk latihan pertama: panjang teks dapat dibaca dengan kolom.value.length.

← Kembali Ke Daftar Pelajaran JavaScript