Tugas 5 PWEB
Dokumentasi :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Validation</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container my-5 ">
<div class="card" style="background-color:rgb(255, 113, 113);">
<div class="text-center my-3 border-bottom">
<h1>Form Vaksinasi</h1>
<h4>Mohon isikan form berikut dengan baik benar</h4>
</div>
<div class="card-body px-5 pt-3">
<div class="container">
<form name="formPendaftaran" action="daftar.php" method="post" onsubmit="return validateForm()">
<div class="form-group">
<label>Nama</label>
<input type="text" name="nama" placeholder="Nama lengkap" class="form-control" required
maxlength="40" minlength="3">
</div>
<div class="form-group">
<label>NRP</label>
<input type="text" name="nrp" placeholder="nrp" class="form-control" required maxlength="40"
minlength="3">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" placeholder="Email Aktif" class="form-control">
<small id="emailHelp" class="form-text text-muted">Email Digunakan Untuk
Mengirimkan
Notifikasi.</small>
</div>
<div class="form-group">
<label>Vaksin</label>
<select name="vaksin" class="form-control">
<option value="0">Status Vaksin</option>
<option value="1">Belum Vaksin</option>
<option value="2">Vaksin Dosis 1</option>
<option value="3">Vaksin Dosis 2</option>
</select>
</div>
<div class="form-group">
<label>Jurusan</label>
<select name="jurusan" class="form-control">
<option value="0">Pilih Departemen</option>
<option value="1">Jurusan Teknik Informatika</option>
<option value="2">Jurusan Teknik Komputer Jaringan</option>
<option value="3">Jurusan Multimedia</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<div class="card-footer text-center">
<h5>Riki Mi'roj Achmad</h5>
</div>
</div>
</div>
<script>
function validateForm() {
if (document.forms["formPendaftaran"]["nama"].value == "") {
alert("Nama Tidak Boleh Kosong");
document.forms["formPendaftaran"]["nama"].focus();
return false;
}
if (document.forms["formPendaftaran"]["nrp"].value == "") {
alert("NRP Tidak Boleh Kosong");
document.forms["formPendaftaran"]["nrp"].focus();
return false;
}
if (document.forms["formPendaftaran"]["email"].value == "") {
alert("Email Tidak Boleh Kosong");
document.forms["formPendaftaran"]["email"].focus();
return false;
}
if (document.forms["formPendaftaran"]["vaksin"].selectedIndex < 1) {
alert("Pilih Riwayat Vaksin");
document.forms["formPendaftaran"]["vaksin"].focus();
return false;
}
if (document.forms["formPendaftaran"]["jurusan"].selectedIndex < 1) {
alert("Pilih Jurusan.");
document.forms["formPendaftaran"]["jurusan"].focus();
return false;
}
}
</script>
</body>
</html>
Comments
Post a Comment