Praktik: Membuat formulir pendaftaran dengan validasi

From OnnoWiki
Revision as of 05:32, 7 April 2025 by Onnowpurbo (talk | contribs)
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>

Formulir Pendaftaran

  <form id="formPendaftaran">
    <label>Nama Lengkap:</label>

    <input type="text" id="nama" required>



    <label>Email:</label>

    <input type="email" id="email" required>

 

    <label>No. Telepon:</label>

    <input type="text" id="telepon" required>



    <label>Password:</label>

    <input type="password" id="password" required>



    <label>
      <input type="checkbox" id="setuju"> Saya setuju dengan syarat dan ketentuan
    </label>



    <input type="submit" value="Daftar">
  </form>



  <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=72375"