Lihat sumber Event handling dan validasi form

==Modul: Event Handling dan Validasi Form di JavaScript==

==Tujuan Pembelajaran==
* siswa mampu memahami konsep '''event handling''' di JavaScript.
* siswa dapat membuat '''validasi form sederhana''' menggunakan JavaScript.
* siswa 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'''

 <!-- 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'''

 <!-- 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.
  
 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==

 <!-- 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 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]]