Praktik: Membuat formulir pendaftaran dengan validasi

From OnnoWiki
Jump to navigation Jump to search

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)

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` 

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

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

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Praktik:_Membuat_formulir_pendaftaran_dengan_validasi&oldid=72410"