Tugas 5
Nama: M Zhafran Musyaffa
NRP: 05111940000147
Kelas: PWEB D 2021
Pada tugas kali ini, diminta untuk membuat web html dengan validasi form menggunakan javascript. Berikut adalah tampilan form.
Adapun untuk versi live dari gambar diatas dapat diakses pada link
Untuk kode nya adalah sebagai berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Validate</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.bitdark {
opacity:0.5;
transition: all 0.25s;
max-height:500px;
}
.bitdark:hover {
opacity:1;
cursor: pointer;
}
</style>
</head>
<body>
<div class="h-screen w-screen flex items-center justify-center">
<div class="mt-4 w-3/12">
<form name="form" onsubmit="return validate(event)">
<p>Form Validasi Vaksinasi Mahasiswa ITS</p>
<input type="text" name="nama" placeholder="nama" class="p-2 rounded border border-gray-300 w-full"></input><br><br>
<input type="text" name="nrp" placeholder="nrp" class="p-2 rounded border border-gray-300 w-full"></input><br><br>
<input type="text" name="email" placeholder="email" class="p-2 rounded border border-gray-300 w-full"></input><br><br>
<p>Departemen</p>
<select name="departemen" class="form-control p-2 rounded border border-gray-300 bg-white w-full ">
<option value="0">Pilih Departemen</option>
<option value="1">Manajemen Bisnis</option>
<option value="2">Desain Produk Industri</option>
<option value="3">Manajemen Teknologi</option>
<option value="4">Desain Interior</option>
<option value="5">Studi Pembangunan</option>
<option value="6">Desain Komunikasi Visual</option>
<option value="7">Teknik Industri</option>
<option value="8">Teknik Mesin</option>
<option value="9">Teknik Kimia</option>
<option value="10">Teknik Fisika</option>
<option value="11">Teknik Material dan Metalurgi</option>
<option value="12">Teknik Informatika</option>
<option value="13">Sistem Informasi</option>
<option value="14">Teknologi Informasi</option>
<option value="15">Teknik Elektro</option>
<option value="16">Teknik Biomedik</option>
<option value="17">Teknik Komputer</option>
<option value="18">Perancangan Wilayah Kota</option>
<option value="19">Arsitektur</option>
<option value="20">Teknik Sipil</option>
<option value="21">Teknik Lingkungan</option>
<option value="22">Teknik Geomatika</option>
<option value="23">Teknik Geofisika</option>
<option value="24">Teknik Perkapalan</option>
<option value="25">Teknik Kelautan</option>
<option value="26">Teknik Transportasi Laut</option>
<option value="27">Biologi</option>
<option value="28">Aktuaria</option>
<option value="29">Matematika</option>
<option value="30">Statistika</option>
<option value="31">Kimia</option>
<option value="32">Fisika</option>
</select><br><br>
<p>Status Vaksin</p>
<select name="status_vaksin" class="form-control p-2 rounded border border-gray-300 bg-white w-full ">
<option value="0">Belum Vaksin</option>
<option value="1">Sudah Vaksin</option>
</select><br><br>
<input type="submit" value="Submit" class="text-center bg-blue-500 text-white rounded px-4 py-2 cursor-pointer"></input><br>
</form>
</div>
</div>
</body>
</html>
<script>
function validate (e) {
e.preventDefault()
if(document.forms['form']['nrp'].length != 12) {
alert("NRP harus 12 digit")
}
if(document.forms['form']['email'].length == 0) {
alert("Email harus diisi")
}
if(document.forms['form']['nama'].length == 0) {
alert("Nama harus diisi")
}
return false
}
</script>
Comments
Post a Comment