Tugas 5 Validator Formulir Covid

 Untuk tugas ke-5, kami diminta untuk berlatih JavaScript dengan mengimplementasikan pada formulir validator Covid. Untuk validasinya sendiri itu, isi dari setiap box. Untuk source code dapat dilihat melalui github dan deployment. Untuk source code dapat dilihat 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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'>
<link rel="stylesheet" href="style.css">
<title>Formulir Validasi Vaksin</title>
</head>
<body>
<nav>
<img src="https://www.its.ac.id/wp-content/uploads/2017/10/logo-its-1.png" alt="Logo ITS">
</nav>
<br>
<h1>Formulir Pendataan Vaksinasi</h1>
<div class="container">
<form name="formulir" class="card" onsubmit="return validateForm()" action="">
<div class="form-group my-1">
<label for="name">Nama Mahasiswa</label>
<br>
<input type="text" id="name" placeholder="Nama Lengkap">
</div>
<div class="form-group my-1">
<label for="nrp">NRP Mahasiswa</label>
<br>
<input type="text" id="nrp" minlength="10" maxlength="16" placeholder="NRP Lengkap">
</div>
<div class="form-group my-1">
<label for="email">Email</label>
<br>
<input type="email" id="email" placeholder="Email aktif">
</div>
<div class="form-group my-1">
<label for="alamat">Alamat</label>
<br>
<textarea name="alamat" id="alamat" cols="40" rows="5" placeholder="Alamat Domisili"></textarea>
</div>
<div class="form-group my-1">
<label for="departemen">Departemen</label>
<br>
<select name="departemen" id="departemen">
<option value="0">Pilih Departemen</option>
<option value="1">FSAD - Fisika</option>
<option value="2">FSAD - Matematika</option>
<option value="3">FSAD - Statistika</option>
<option value="4">FSAD - Kimia</option>
<option value="5">FSAD - Biologi</option>
<option value="6">FSAD - Aktuaria</option>
<option value="7">FTK - Teknik Perkapalan</option>
<option value="8">FTK - Teknik Sistem Perkapalan</option>
<option value="9">FTK - Teknik Kelautan</option>
<option value="10">FTK - Teknik Transportasi Laut</option>
<option value="11">FTIRS - Teknik Mesin</option>
<option value="12">FTIRS - Teknik Kimia</option>
<option value="13">FTIRS - Teknik Fisika</option>
<option value="14">FTIRS - Teknik Industri</option>
<option value="15">FTIRS - Teknik Material</option>
<option value="16">FTEIC - Teknik Elektro</option>
<option value="17">FTEIC - Teknik Biomedik</option>
<option value="18">FTEIC - Teknik Komputer</option>
<option value="19">FTEIC - Teknik Informatika</option>
<option value="20">FTEIC - Sistem Informasi</option>
<option value="21">FTEIC - Teknologi Informasi</option>
<option value="22">FTSPK - Teknik Sipil</option>
<option value="23">FTSPK - Arsitektur</option>
<option value="24">FTSPK - Teknik Lingkungan</option>
<option value="25">FTSPK - Perencanaan Wilayah dan Kota</option>
<option value="26">FTSPK - Teknik Geomatika</option>
<option value="27">FTSPK - Teknik Geofisika</option>
<option value="28">FDKBD - Desain Produk Industri</option>
<option value="29">FDKBD - Desain Interior</option>
<option value="30">FDKBD - Desain Komunikasi Visual</option>
<option value="31">FDKBD - Manajemen Bisnis</option>
<option value="32">FDKBD - Studi Pembangunan</option>
<option value="33">FDKBD - Manajemen Teknologi</option>
<option value="34">FV - Teknik Infrastruktur Sipil</option>
<option value="35">FV - Teknik Mesin Industri</option>
<option value="36">FV - Teknik Elektro Otomasi</option>
<option value="37">FV - Teknik Kimia Industri</option>
<option value="38">FV - Teknik Instrumentasi</option>
<option value="39">FV - Statistika Bisnis</option>
</select>
</div>
<div class="form-group my-1">
<label for="vaksin">Status Vaksin</label>
<br>
<select name="vaksin" id="vaksin">
<option value="0">Pilih Status Vaksin</option>
<option value="1">Belum Divaksin</option>
<option value="2">Sudah Divaksin Dosis ke-1</option>
<option value="3">SUdah Divaksin Dosis ke-2</option>
</select>
</div>
<br>
<div><button class="btn btn-primary">Submit</button></div>
</form>
</div>
</body>
<script src="main.js"></script>
</html>
view raw gistfile1.txt hosted with ❤ by GitHub
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
nav
{
background-color: #013880;
}
img
{
width: 200px
}
body
{
font-family: 'Quicksand', sans-serif;
align-content: center;
align-self: center;
}
h1
{
font-weight: bold;
text-align: center;
}
.container
{
display: flex;
}
form
{
flex: auto;
max-width: 1500px;
text-align: center;
box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding: 20px;
margin-top: 20px;
}
view raw style.css hosted with ❤ by GitHub
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
function validateForm()
{
// Validasi nama
if(document.getElementById("name").value == "")
{
swal({
title: "Mohon melengkapi nama pada formulir",
confirmButtonText: "Konfirmasi",
confirmButtonColor: "#DB3644",
});
return false;
}
else
{
const regex = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
if (regex.test(document.getElementById("name").value))
{
swal({
title: "Mohon nama formulir ditulis dengan benar",
confirmButtonText: "Konfirmasi",
confirmButtonColor: "#DB3644",
});
return false;
}
}
// Validasi NRP
if(document.getElementById("nrp").value == "")
{
swal({
title: "Mohon melengkapi NRP pada formulir",
confirmButtonText: "Konfirmasi",
confirmButtonColor: "#DB3644",
});
return false;
}
const regex = /^\d+$/;
if (!regex.test(document.getElementById("nrp").value))
{
swal({
title: "Mohon NRP ditulis dengan benar",
confirmButtonText: "Konfirmasi",
confirmButtonColor: "#DB3644",
});
return false;
}
if (document.getElementById("nrp").value.length == 10 && document.getElementById("nrp").value.length == 14)
{
swal({
title: "Mohon NRP ditulis dengan benar",
confirmButtonText: "Konfirmasi",
confirmButtonColor: "#DB3644",
});
return false;
}
// Validasi Email
if(document.getElementById("email").value == "")
{
swal({
title: "Mohon melengkapi Email pada formulir",
confirmButtonText: "Konfirmasi",
confirmButtonColor: "#DB3644",
});
return false;
}
if(!isEmail(document.getElementById("email").value))
{
swal({
title: "Mohon Email ditulis dengan benar",
confirmButtonText: "Konfirmasi",
confirmButtonColor: "#DB3644",
});
return false;
}
// Validasi Alamat
if(document.getElementById("alamat").value == "")
{
swal({
title: "Mohon melengkapi alamat pada formulir",
confirmButtonText: "Konfirmasi",
confirmButtonColor: "#DB3644",
});
return false;
}
// Validasi Departemen
if(document.getElementById("departemen").selectedIndex < 1)
{
swal({
title: "Mohon dipilih departemen pada formulir",
confirmButtonText: "Konfirmasi",
confirmButtonColor: "#DB3644",
});
return false;
}
// Validasi Vaksin
if(document.getElementById("vaksin").selectedIndex < 1)
{
swal({
title: "Mohon dipilih status vaksinasi pada formulir",
confirmButtonText: "Konfirmasi",
confirmButtonColor: "#DB3644",
});
return false;
}
swal({
title: "Terima kasih telah mengisi pendataan Vaksinasi",
confirmButtonText: "Konfirmasi",
confirmButtonColor: "#449D44",
});
document.formulir.reset();
return false;
}
view raw main.js hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 9 Exception Handling

Exception merupakan subkelas dari kelas java.lang.Throwable. Karena Exception adalah sebuah kelas maka hakikatnya ketika program berjalan dan muncul sebuah bug atau kesalahan maka bug tersebut dapat dianggap sebuah object. Sehingga ketika object ini di tampilkan di layar maka java akan secara otomatis memanggil method toString yang terdapat dalam object bertipe Exception ini. Java memberikan akses kepada developer untuk mengambil object bug yang terjadi ini dengan mekanisme yang dikenal Exception Handling. Exception handling merupakan fasilitas di java yang memberikan flexibilitas kepada developer untuk menangkap bug atau kesalahan yang terjadi ketika program berjalan. Ada 3 keyword penting dalam java dalam hal exception handling : 1. try      Keyword try biasanya digunakan dalam suatu block program. Keyword ini digunakan untuk mencoba menjalankan block program kemudian mengenai sasaran dimana munculnya kesalahan yang ingin diproses. Keyword ini juga harus dipasangka...
Baca selengkapnya