Event handling dan validasi form
Siap! Kita buat **modul Event Handling dan Validasi Form menggunakan JavaScript**, lengkap dengan contoh **tanpa menggunakan Microsoft Visual Studio Code**, khusus untuk Ubuntu 24.04. Semua contoh bisa kamu kerjakan cukup dengan **text editor seperti Gedit, Nano, atau bahkan terminal + browser (Firefox/Chrome)**.
---
- 📘 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
```html <!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
```html <!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.
```bash gedit event.html ```
- **Nano**: Editor teks terminal.
```bash nano validasi.html ```
- **Mousepad / Pluma / Leafpad**: Tergantung desktop environment.
- 🌐 Browser untuk testing:
- **Firefox** atau **Chromium**
```bash firefox event.html ```
---
- 4. 📦 Tambahan: Validasi Multiple Field
```html <!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 - Email - 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
---
Kalau kamu mau, aku bisa bantu bikin template tugasnya juga. Mau?