Tugas 5 PWEB B
Nama : Stefanus Albert Kosim
NRP : 05111940000096
Kelas : MPPL-A 2021
NRP : 05111940000096
Kelas : MPPL-A 2021
Tugas ini adalah membuat sebuah form validasi status vaksin untuk mengikuti kuliah tatap muka dengan menggunakan HTML, CSS, dan JavaScript, dimana terdapat kolom yang menerima input berupa nama, nrp, email, domisili, departemen, serta status vaksin. Agar form dapat disubmit, tidak boleh ada kolom yang kosong.
Berikut adalah kondisi yang harus dipenuhi dari beberapa kolom:
- Kolom nama hanya dapat menerima maksimal 50 karakter
- Kolom NRP hanya bisa menerima angka dengan panjang 10 hingga 16 digit
- Kolom email hanya dapat menerima text dengan format email
Tampilan Website :
HTML & CSS:
This file contains hidden or 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> | |
| <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 Persetujuan Tatap Muka & Validasi Vaksin</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
| <script src="script.js"></script> | |
| <style> | |
| body { | |
| background-color: #ebedff; | |
| } | |
| footer { | |
| background-color: #fff; | |
| height: 80px; | |
| width: 100%; | |
| margin-top: 40px; | |
| } | |
| .form-control { | |
| border: #013880 1px solid; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container align-items-center justify-content-center" style="max-width: 45rem;"> | |
| <h2 class="font-weight-bold text-center pt-4">Form Persetujuan Tatap Muka & Validasi Vaksin</h2> | |
| <form autocomplete="off" name="formValidasi" onsubmit="return validateForm()" class="pt-2"> | |
| <div class="form-group"> | |
| <label class="font-weight-bold">Nama</label> | |
| <input type="text" name="nama" placeholder="Nama lengkap" class="form-control" maxlength="50"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="font-weight-bold">NRP</label> | |
| <input type="text" name="nrp" class="form-control" minlength="10" maxlength="16"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="font-weight-bold">Email</label> | |
| <input type="email" name="email" placeholder="santoso@email.com" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="font-weight-bold">Domisili</label> | |
| <textarea cols="40" rows="5" name="domisili" placeholder="Surabaya, Jawa Timur" class="form-control"></textarea> | |
| <!-- <textarea type="textarea" name="domisili" placeholder="Surabaya, Jawa Timur" class="form-control"> --> | |
| </div> | |
| <div class="form-group"> | |
| <label class="font-weight-bold">Jurusan</label> | |
| <select name="jurusan" class="form-control"> | |
| <option selected>- Pilih Jurusan</option> | |
| <option value="1">Fisika</option> | |
| <option value="2">Matematika</option> | |
| <option value="3">Statistika</option> | |
| <option value="4">Kimia</option> | |
| <option value="5">Biologi</option> | |
| <option value="6">Aktuaria</option> | |
| <option value="7">Teknik Perkapalan</option> | |
| <option value="8">Teknik Sistem Perkapalan</option> | |
| <option value="9">Teknik Kelautan</option> | |
| <option value="10">Teknik Transportasi Laut</option> | |
| <option value="11">Teknik Mesin</option> | |
| <option value="12">Teknik Kimia</option> | |
| <option value="13">Teknik Fisika</option> | |
| <option value="14">Teknik Sistem dan Industri</option> | |
| <option value="15">Teknik Material</option> | |
| <option value="16">Teknik Elektro</option> | |
| <option value="17">Teknik Biomedik</option> | |
| <option value="18">Teknik Komputer</option> | |
| <option value="19">Teknik Informatika</option> | |
| <option value="20">Sistem Informasi</option> | |
| <option value="21">Teknologi Informasi</option> | |
| <option value="22">Teknik Sipil</option> | |
| <option value="23">Arsitektur</option> | |
| <option value="24">Teknik Lingkungan</option> | |
| <option value="25">Perencanaan Wilayah dan Kota</option> | |
| <option value="26">Teknik Geomatika</option> | |
| <option value="27">Teknik Geofisika</option> | |
| <option value="28">Desain Produk Industri</option> | |
| <option value="29">Desain Interior</option> | |
| <option value="30">Desain Komunikasi Visual</option>/ | |
| <option value="31">Manajemen Bisnis</option> | |
| <option value="32">Studi Pembangunan</option> | |
| <option value="33">Manajemen Teknologi</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label class="font-weight-bold">Status Vaksin</label> | |
| <select name="status_vaksin" class="form-control"> | |
| <option selected>- Pilih Status</option> | |
| <option value="1">Belum Vaksin</option> | |
| <option value="2">Sudah Vaksin - Dosis 1</option> | |
| <option value="3">Sudah Vaksin - Dosis 2</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="btn btn-primary" style="margin-top: 10px;">Submit</button> | |
| </form> | |
| </div> | |
| <footer> | |
| <div class="font-weight-light text-center p-4"> | |
| © 2021 Institut Teknologi Sepuluh Nopember | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |
JavaScript :
This file contains hidden or 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["formValidasi"]["nama"].value == "") { | |
| alert("Nama Harus Diisi."); | |
| document.forms["formValidasi"]["nama"].focus(); | |
| return false; | |
| } | |
| if (document.forms["formValidasi"]["nrp"].value == "") { | |
| alert("NRP Harus Diisi."); | |
| document.forms["formValidasi"]["nrp"].focus(); | |
| return false; | |
| } | |
| if (isNaN(document.forms["formValidasi"]["nrp"].value)) { | |
| alert("NRP Harus Angka."); | |
| document.forms["formValidasi"]["nrp"].focus(); | |
| return false; | |
| } | |
| if (document.forms["formValidasi"]["email"].value == "") { | |
| alert("Email Harus Diisi."); | |
| document.forms["formValidasi"]["email"].focus(); | |
| return false; | |
| } | |
| if (document.forms["formValidasi"]["domisili"].value == "") { | |
| alert("Domisili Harus Diisi."); | |
| document.forms["formValidasi"]["domisili"].focus(); | |
| return false; | |
| } | |
| if (document.forms["formValidasi"]["jurusan"].selectedIndex < 1) { | |
| alert("Harap Pilih Jurusan."); | |
| document.forms["formValidasi"]["jurusan"].focus(); | |
| return false; | |
| } | |
| if (document.forms["formValidasi"]["status_vaksin"].selectedIndex < 1) { | |
| alert("Harap Pilih Status."); | |
| document.forms["formValidasi"]["status_vaksin"].focus(); | |
| return false; | |
| } | |
| alert("Data telah disubmit"); | |
| } |
Komentar
Posting Komentar