Praktik: Membuat formulir pendaftaran dengan validasi
Revision as of 06:26, 7 April 2025 by Onnowpurbo (talk | contribs)
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.