Pada tugas 5 ini diminta untuk membuat form validasi vaksin menggunakan Javascript. Field yang dibutuhkan pada form, yaitu nama lengkap, NRP, departemen, email, alamat domisili, dan status vaksinasi.
Berikut adalah link form validasi vaksin :
Berikut adalah tampilan dari form tersebut:
1. Header
2. Form
3. Footer
Berikut adalah source code untuk form tersebut:
1.index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Belajar Form Validasi</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="main.css"> | |
| <link rel="stylesheet" href="main.js"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <h1>Form Vaksin Mahasiswa</h1> | |
| <h2>Institut Teknologi Sepuluh Nopember</h2> | |
| <h3>Semester Gasal 2021/2022</h3> | |
| </div> | |
| <div class="forms"> | |
| <div class="container"> | |
| <form name="formPendaftaran" action="daftar.php" method="post" onsubmit="return validateForm()"> | |
| <div class="form-group"> | |
| <label>Nama Mahasiswa</label> | |
| <input type="text" name="nama" placeholder="Nama lengkap" class="form-control" required maxlength="40" minlength="3"> | |
| </div> | |
| <div class="form-group"> | |
| <label>NRP Mahasiswa</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 ITS" class="form-control"> | |
| <small id="emailHelp" class="form-text text-muted">Email Akan Digunakan Untuk Mengirimkan Notifikasi.</small> | |
| </div> | |
| <div class="form-group"> | |
| <label>Alamat Domisili</label> | |
| <input type="text" name="alamatDom" placeholder="Alamat sesuai dengan domisili" class="form-control" required maxlength="40" minlength="3"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Departemen</label> | |
| <select name="dep" class="form-control"> | |
| <option value="0">Pilih Departemen</option> | |
| <option value="1">Teknik Informatika</option> | |
| <option value="2">Teknik Elektro</option> | |
| <option value="3">Teknik Komputer</option> | |
| <option value="4">Sistem Informasi</option> | |
| <option value="5">Teknologi Informasi</option> | |
| </select> | |
| </div> | |
| <div class="form-group", style="padding-bottom: 20px;"> | |
| <label>Status Vaksinasi</label> | |
| <select name="status" class="form-control"> | |
| <option value="0">Pilih Status</option> | |
| <option value="1">Belum Melakukan Vaksinasi</option> | |
| <option value="2">Dosis 1</option> | |
| <option value="3">Dosis 2</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="btn btn-primary", style="float: right; background-color: #0067AC;">Submit</button> | |
| </form> | |
| </div> | |
| <div class="footer"> | |
| <p>Copyright © 2021 Institut Teknologi Sepuluh Nopember </p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
2.main.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container{ | |
| font-family: 'Open Sans', sans-serif; | |
| width: 70%; | |
| height: auto; | |
| background-color: #f5f5f5; | |
| padding-top: 2rem; | |
| padding-bottom: 5rem; | |
| padding-left: 3rem; | |
| padding-right: 3rem; | |
| } | |
| .header{ | |
| background-color: #0067AC; | |
| padding-top: 2rem; | |
| padding-bottom: 1.5rem; | |
| font-family: 'Open Sans', sans-serif; | |
| text-align: center; | |
| color: white; | |
| } | |
| .header h1{ | |
| font-size: 40px; | |
| padding-bottom: 10px; | |
| } | |
| .header h2{ | |
| font-size: 30px; | |
| padding-bottom: 15px; | |
| } | |
| .header h3{ | |
| font-size: 20px; | |
| padding-bottom: 10px; | |
| } | |
| .forms{ | |
| background-color: #0067AC; | |
| /* padding-bottom: 5rem; */ | |
| } | |
| .footer{ | |
| /* width: 65%; */ | |
| padding-bottom: 2px; | |
| padding-top: 10px; | |
| background-color: black; | |
| color: white; | |
| text-align: left; | |
| padding-left: 13rem; | |
| align-items: center; | |
| margin: auto; | |
| } |
3.main.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function validateForm() { | |
| if (document.forms["formPendaftaran"]["nama"].value == "") { | |
| alert("Nama Tidak Boleh Kosong"); | |
| document.forms["formPendaftaran"]["nama"].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"]["status"].selectedIndex < 1) { | |
| alert("Pilih status"); | |
| document.forms["formPendaftaran"]["status"].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"]["dep"].value == "") { | |
| alert("Pilih Departemen"); | |
| document.forms["formPendaftaran"]["dep"].focus(); | |
| return false; | |
| } | |
| if (document.forms["formPendaftaran"]["alamatDom"].value == "") { | |
| alert("Alamat Domisili Tidak Boleh Kosong"); | |
| document.forms["formPendaftaran"]["alamatDom"].focus(); | |
| return false; | |
| } | |
| } |
Comments
Post a Comment