Event handling dan validasi form

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 siswa

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

Pranala Menarik

Web Programming