Difference between revisions of "Event handling dan validasi form"

From OnnoWiki
Jump to navigation Jump to search
(Created page with "Siap! Kita buat **modul Event Handling dan Validasi Form menggunakan JavaScript**, lengkap dengan contoh **tanpa menggunakan Microsoft Visual Studio Code**, khusus untuk Ubunt...")
 
 
Line 1: Line 1:
−
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)'''.
  
−
## 📘 Modul: Event Handling dan Validasi Form di JavaScript
+
==1. 🧠 Konsep Event Handling di JavaScript==
  
−
### 🎯 Tujuan Pembelajaran
+
'''Event Handling''' adalah proses menangani interaksi pengguna (klik, ketik, submit, dll.) menggunakan JavaScript.
−
- 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)**.
 
  
−
---
+
'''Contoh Dasar: Klik Tombol'''
  
−
## 1. 🧠 Konsep Event Handling di JavaScript
+
<!-- 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>
  
−
**Event Handling** adalah proses menangani interaksi pengguna (klik, ketik, submit, dll.) menggunakan JavaScript.
+
'''Cara menjalankan:'''
 +
* Simpan file sebagai `event.html`
 +
* Buka di browser: klik kanan → '''Open With Firefox/Chrome'''
  
−
### 🔧 Contoh Dasar: Klik Tombol
 
  
−
```html
+
==2. ✅ Validasi Form Sederhana==
−
<!-- 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>
+
'''Contoh: Cek Nama Tidak Kosong'''
−
    document.getElementById("klikSaya").addEventListener("click", function() {
 
−
      document.getElementById("pesan").innerText = "Tombol telah diklik!";
 
−
    });
 
−
  </script>
 
−
</body>
 
−
</html>
 
−
```
 
  
−
📂 **Cara menjalankan:**
+
<!-- Simpan sebagai file: validasi.html -->
−
- Simpan file sebagai `event.html`
+
<!DOCTYPE html>
−
- Buka di browser: klik kanan → **Open With Firefox/Chrome**
+
<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.
  
−
## 2. ✅ Validasi Form Sederhana
 
  
−
### 🔧 Contoh: Cek Nama Tidak Kosong
+
==3. 🛠 Tools di Ubuntu 24.04 (Tanpa VS Code)==
  
−
```html
+
'''Text Editor:'''
−
<!-- 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>
+
* '''Gedit''': GUI Editor bawaan GNOME.
−
    document.getElementById("formulir").addEventListener("submit", function(event) {
+
 
−
      let nama = document.getElementById("nama").value;
+
gedit event.html
−
      if (nama.trim() === "") {
 
−
        event.preventDefault(); // mencegah form terkirim
 
−
        document.getElementById("peringatan").innerText = "Nama tidak boleh kosong!";
 
−
      }
 
−
    });
 
−
  </script>
 
−
</body>
 
−
</html>
 
−
```
 
  
−
📌 **Catatan:**
+
* '''Nano''': Editor teks terminal.
−
- `event.preventDefault()` mencegah form mengirim jika input kosong.
+
 
 +
nano validasi.html
  
−
---
+
* '''Mousepad / Pluma / Leafpad''': Tergantung desktop environment.
  
−
## 3. 🛠 Tools di Ubuntu 24.04 (Tanpa VS Code)
+
'''Browser untuk testing:'''
  
−
### 📝 Text Editor:
+
* '''Firefox''' atau '''Chromium'''
−
- **Gedit**: GUI Editor bawaan GNOME.
+
    
−
   ```bash
+
firefox event.html
−
  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==
  
−
## 4. 📦 Tambahan: Validasi Multiple Field
+
<!-- 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>
  
−
```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>
+
==📚 Tugas Mahasiswa==
−
    document.getElementById("formulir").addEventListener("submit", function(e) {
 
−
      let nama = document.getElementById("nama").value;
 
−
      let email = document.getElementById("email").value;
 
−
      let error = "";
 
  
−
      if (nama.trim() === "") {
+
1. Buat form pendaftaran yang terdiri dari:
−
        error += "Nama harus diisi. ";
+
* Nama lengkap
−
      }
+
* Email
−
      if (!email.includes("@")) {
+
* Nomor telepon
−
        error += "Email tidak valid. ";
+
* Checkbox "Saya setuju dengan syarat dan ketentuan"
−
      }
 
−
 
 
−
      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:
 
2. Validasi semua input:
−
  - Semua harus diisi
+
* Semua harus diisi
−
  - Email harus valid
+
* Email harus valid
−
  - Nomor telepon hanya angka
+
* Nomor telepon hanya angka
−
  - Checkbox harus dicentang
+
* Checkbox harus dicentang
  
−
---
+
==Pranala Menarik==
  
−
Kalau kamu mau, aku bisa bantu bikin template tugasnya juga. Mau?
+
* [[Web Programming]]

Latest revision as of 19:05, 6 April 2025

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

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Event_handling_dan_validasi_form&oldid=72372"