View source for 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
<!-- Simpan sebagai file: event.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Contoh Event</title>
</head>
<body>
  <button id="klikSaya">Klik Saya</button>
  <p id="pesan"></p>

  <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
<!-- Simpan sebagai file: validasi.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Form Validasi</title>
</head>
<body>
  <form id="formulir">
    Nama: <input type="text" id="nama"><br>
    <input type="submit" value="Kirim">
  </form>
  <p id="peringatan" style="color:red;"></p>

  <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
<!-- Simpan sebagai file: multi_validasi.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Validasi Lengkap</title>
</head>
<body>
  <form id="formulir">
    Nama: <input type="text" id="nama"><br>
    Email: <input type="email" id="email"><br>
    <input type="submit" value="Submit">
  </form>
  <p id="peringatan" style="color:red;"></p>

  <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?