Tugas 5 - Membuat Form Validasi Vaksin
Untuk project kali ini saya membuat form validasi vaksin dengan menggunakan HTML, CSS, dan Javascript. Website ini bisa diakses di link berikut : Website
Untuk tampilan website :
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>Validation Form</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" | |
| /> | |
| </head> | |
| <body style="background-color: #DCDCDC"> | |
| <div class="container text-center"> | |
| <h1>Form Validasi Vaksin</h1> | |
| </div> | |
| <div class="container"> | |
| <form | |
| name="formPendaftaran" | |
| action="#" | |
| method="post" | |
| onsubmit="return validateForm()" | |
| > | |
| <div class="form-group mt-5"> | |
| <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="number" | |
| name="nrp" | |
| placeholder="NRP anda" | |
| class="form-control" | |
| required | |
| maxlength="14" | |
| minlegnth="10" | |
| /> | |
| </div> | |
| <div class="form-group"> | |
| <label>Jurusan</label> | |
| <select name="jurusan" class="form-control"> | |
| <option value="0">Pilih Jurusan</option> | |
| <option value="1">Teknik Informatika</option> | |
| <option value="2">Teknik Komputer</option> | |
| <option value="3">Teknik Biomedik</option> | |
| <option value="4">Sistem Informasi</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Apakah sudah melakukan vaksin pertama?</label> | |
| <select name="vaksin1" class="form-control"> | |
| <option value="0">Pilih opsi</option> | |
| <option value="1">Sudah</option> | |
| <option value="2">Belum</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Apakah sudah melakukan vaksin kedua?</label> | |
| <select name="vaksin2" class="form-control"> | |
| <option value="0">Pilih opsi</option> | |
| <option value="1">Sudah</option> | |
| <option value="2">Belum</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Submit</button> | |
| </form> | |
| </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"]["jurusan"].selectedIndex < 1) { | |
| alert("Pilih Jurusan"); | |
| document.forms["formPendaftaran"]["jurusan"].focus(); | |
| return false; | |
| } | |
| if (document.forms["formPendaftaran"]["vaksin1"].selectedIndex < 1) { | |
| alert("Pilih salah satu"); | |
| document.forms["formPendaftaran"]["vaksin1"].focus(); | |
| return false; | |
| } | |
| if (document.forms["formPendaftaran"]["vaksin2"].selectedIndex < 1) { | |
| alert("Pilih salah satu"); | |
| document.forms["formPendaftaran"]["vaksin2"].focus(); | |
| return false; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html><!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Validation Form</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" | |
| /> | |
| </head> | |
| </html> |
Comments
Post a Comment