View source for Praktik: Membuat formulir pendaftaran dengan validasi

==Modul Praktik: Formulir Pendaftaran + Validasi JavaScript==

==🎯 Tujuan Praktikum==
* Mahasiswa mampu membuat form HTML untuk pendaftaran.
* Mahasiswa memahami dan mengimplementasikan '''validasi input''' dengan JavaScript.
* Mahasiswa dapat '''menguji form''' di Ubuntu menggunakan tools tanpa software berbayar.

==1. 🧰 Tools yang Digunakan (Ubuntu 24.04)==

{| class="wikitable"
! Tool !! Keterangan
|-
| Gedit || GUI Text Editor bawaan GNOME
|-
| Nano || Text editor berbasis terminal
|-
| Firefox || Browser bawaan Ubuntu
|-
| Chromium || Alternatif browser open source
|}

==2. 📄 Struktur File==

 /formulir
 └── pendaftaran.html

==3. 🧱 Formulir Pendaftaran (HTML + JavaScript)==

'''✍️ File: `pendaftaran.html`'''

<pre>
 <!DOCTYPE html>
 <html>
 <head>
   <title>Formulir Pendaftaran</title>
 </head>
 <body>
   <h2>Formulir Pendaftaran</h2>
   <form id="formPendaftaran">
     <label>Nama Lengkap:</label><br>
     <input type="text" id="nama" required><br><br>
 
     <label>Email:</label><br>
     <input type="email" id="email" required><br><br> 
 
     <label>No. Telepon:</label><br>
     <input type="text" id="telepon" required><br><br>
 
     <label>Password:</label><br>
     <input type="password" id="password" required><br><br>
 
     <label>
       <input type="checkbox" id="setuju"> Saya setuju dengan syarat dan ketentuan
     </label><br><br>
 
     <input type="submit" value="Daftar">
   </form>
 
   <p id="pesan" style="color:red;"></p> 
 
   <script>
     document.getElementById("formPendaftaran").addEventListener("submit", function(e) {
       let nama = document.getElementById("nama").value.trim();
       let email = document.getElementById("email").value.trim();
       let telepon = document.getElementById("telepon").value.trim();
       let password = document.getElementById("password").value.trim();
       let setuju = document.getElementById("setuju").checked;
 
       let pesan = "";
 
       if (nama === "" || email === "" || telepon === "" || password === "") {
         pesan = "Semua field harus diisi.";
       } else if (!/^\d+$/.test(telepon)) {
         pesan = "Nomor telepon harus berupa angka.";
       } else if (password.length < 6) {
         pesan = "Password minimal 6 karakter.";
       } else if (!setuju) {
         pesan = "Anda harus menyetujui syarat dan ketentuan.";
       }
 
       if (pesan !== "") {
         e.preventDefault();
         document.getElementById("pesan").innerText = pesan;
       } else {
         alert("Pendaftaran berhasil!");
       }
     });
   </script>
 </body>
 </html>
</pre>

==4. 🚀 Cara Menjalankan di Ubuntu==

'''Dengan Gedit (GUI)'''

 gedit pendaftaran.html

'''Dengan Nano (Terminal)'''

 nano pendaftaran.html

'''Jalankan di Browser'''

 firefox pendaftaran.html

Atau buka file secara manual dari File Explorer → klik kanan → Open with Firefox.

==5. 📚 Tugas Mahasiswa==

* Tambahkan kolom '''"Ulangi Password"''':
** Validasi apakah kedua password cocok.
* Tambahkan dropdown '''pilihan jurusan'''.
* Tampilkan hasil input ke console browser (`console.log`) jika validasi berhasil.


==Pranala Menarik==

* [[Web Programming]]