Event handling dan validasi form: Difference between revisions

From OnnoCenterWiki
Jump to navigationJump to search
Unknown user (talk)
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..."
 
No edit summary
 
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 12: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://lms.onnocenter.or.id/wiki/index.php?title=Event_handling_dan_validasi_form&oldid=72372"