Event handling dan validasi form
Jump to navigation
Jump to search
Modul: Event Handling dan Validasi Form di JavaScript
Tujuan Pembelajaran
- Mahasiswa mampu memahami konsep event handling di JavaScript.
- Mahasiswa dapat membuat validasi form sederhana menggunakan JavaScript.
- Mahasiswa dapat menguji kode menggunakan tool bawaan Ubuntu (tanpa VS Code).
1. ๐ง Konsep Event Handling di JavaScript
Event Handling adalah proses menangani interaksi pengguna (klik, ketik, submit, dll.) menggunakan JavaScript.
Contoh Dasar: Klik Tombol
<!DOCTYPE html> <html> <head> <title>Contoh Event</title> </head> <body> <button id="klikSaya">Klik Saya</button>
<script> document.getElementById("klikSaya").addEventListener("click", function() { document.getElementById("pesan").innerText = "Tombol telah diklik!"; }); </script> </body> </html>
Cara menjalankan:
- Simpan file sebagai `event.html`
- Buka di browser: klik kanan โ Open With Firefox/Chrome
2. โ Validasi Form Sederhana
Contoh: Cek Nama Tidak Kosong
<!DOCTYPE html> <html> <head> <title>Form Validasi</title> </head> <body> <form id="formulir"> Nama: <input type="text" id="nama">
<input type="submit" value="Kirim"> </form>
<script> document.getElementById("formulir").addEventListener("submit", function(event) { let nama = document.getElementById("nama").value; if (nama.trim() === "") { event.preventDefault(); // mencegah form terkirim document.getElementById("peringatan").innerText = "Nama tidak boleh kosong!"; } }); </script> </body> </html>
Catatan:
- `event.preventDefault()` mencegah form mengirim jika input kosong.
3. ๐ Tools di Ubuntu 24.04 (Tanpa VS Code)
Text Editor:
- Gedit: GUI Editor bawaan GNOME.
gedit event.html
- Nano: Editor teks terminal.
nano validasi.html
- Mousepad / Pluma / Leafpad: Tergantung desktop environment.
Browser untuk testing:
- Firefox atau Chromium
firefox event.html
4. ๐ฆ Tambahan: Validasi Multiple Field
<!DOCTYPE html> <html> <head> <title>Validasi Lengkap</title> </head> <body> <form id="formulir"> Nama: <input type="text" id="nama">
Email: <input type="email" id="email">
<input type="submit" value="Submit"> </form>
<script> document.getElementById("formulir").addEventListener("submit", function(e) { let nama = document.getElementById("nama").value; let email = document.getElementById("email").value; let error = ""; if (nama.trim() === "") { error += "Nama harus diisi. "; } if (!email.includes("@")) { error += "Email tidak valid. "; } if (error !== "") { e.preventDefault(); document.getElementById("peringatan").innerText = error; } }); </script> </body> </html>
๐ Tugas Mahasiswa
1. Buat form pendaftaran yang terdiri dari:
- Nama lengkap
- Nomor telepon
- Checkbox "Saya setuju dengan syarat dan ketentuan"
2. Validasi semua input:
- Semua harus diisi
- Email harus valid
- Nomor telepon hanya angka
- Checkbox harus dicentang