Tugas 5 - Formulir Vaksinasi Diri Menggunakan JavaScript - Rahadian Adjie Mahesa - 05111940000221

on
Pada tugas Ke-5 ini, kami diberi tugas untuk membuat Form Vaksinasi simple. Untuk melakukan itu saya menyelesaikan tugas ini dengan menggunakan Bootstrap, HTML, CSS dan JS. Hasil tampilan dari web yang telah saya buat adalah sebagai berikut


Jika ada salah satu form yang tidak terisi maka akan menunjukkan alert/pop up seperti berikut


Disini kami akan memanggil ke script javascript item nya yaitu form dan id dari setiap input untuk melakukan pengecekan apakah value nya 0 atau tidak. Jika tidak maka akan timbul error bahwa form masih kosong.

Berikut adalah Source Code nya:
HTML
<!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>Form Validasi Vaksinasi - 05111940000221</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
</head>

<body>
    <header>
        <h1 class='text-center my-5'>
            Form Pendataan Status Vaksinasi Mahasiswa ITS
        </h1>
    </header>
    <div class="container">
        <form name="form" onsubmit="return validate()">
            <div class="form-group">
                <label>Nama</label>
                <input type="text" name="nama" placeholder="Nama Lengkap" class="form-control">
            </div>
            <div class="form-group">
                <label>NRP</label>
                <input type="text" name="nrp" placeholder="NRP Mahasiswa" class="form-control">
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="email" name="email" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
                <label>Departemen</label>
                <select name="departemen" class="form-control">
                    <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>
            </div>
            <div class="form-group">
                <label>Status Vaksinasi</label>
                <select name="vaksin" class="form-control">
                    <option value="0">Pilih Status Vaksin</option>
                    <option value="1">Sudah Vaksin</option>
                    <option value="2">Belum Vaksin</option>
                </select>
            </div>
            <button type="submit" class="btn btn-success">Submit</button>
        </form>
    </div>
</body>

</html>
Javascript
function validate() {
    if (document.forms["form"]["nama"].value == "") {
        alert("Error: Nama Masih Kosong");
        document.forms["form"]["nama"].focus();
        return false;
    }
    if (document.forms["form"]["nrp"].value == "") {
        alert("Error: NRP Masih Kosong");
        document.forms["form"]["nrp"].focus();
        return false;
    }
    if (document.forms["form"]["email"].value == "") {
        alert("Error: Email Masih Kosong");
        document.forms["form"]["email"].focus();
        return false;
    }
    if (document.forms["form"]["departemen"].selectedIndex == 0) {
        alert("Error: Departemen Masih Kosong");
        document.forms["form"]["departemen"].focus();
        return false;
    }
    if (document.forms["form"]["vaksin"].selectedIndex == 0 ) {
        alert("Error: Status Vaksinasi Masih Kosong");
        document.forms["form"]["vaksin"].focus();
        return false;
    }
}
CSS
body{
    max-width: 60rem;
    margin: auto;
    background: lightgrey;
    color: white;
}

.container{
    color: black;
}

Comments

Post a Comment