Event handling dan validasi form

From OnnoWiki
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
  • 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