<!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 style="background-color: rgb(39, 39, 39);">
    <div class="container my-5 ">
        <div class="card" style="background-color:rgb(158, 211, 255);">
            <div class="text-center my-3">
                <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" style="margin: 20px; margin-left: 0;">Submit</button>
                    </form>
                </div>
            </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>