Belajar Validasi Form Javascript
Pada blogpost ini saya belajar cara menggunakan javascript untuk validasi form pada form vaksinasi. Berikut adalah hasil dari pekerjaan saya.
Source Code:
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>Form Vaksinasi</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <h1 style="text-align:center;">Form Vaksinasi</h1> | |
| <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="12" minlength="12"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Alamat</label> | |
| <input type="text" name="alamat" placeholder="Alamat Lengkap" class="form-control" required maxlength="100" minlength="5"> | |
| </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 Akan Digunakan Untuk Mengirimkan Notifikasi.</small> | |
| </div> | |
| <div class="form-group"> | |
| <label>Jurusan</label> | |
| <select name="jurusan" class="form-control"> | |
| <option value="0">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>Status Vaksin</label> | |
| <select name="status_vaksin" class="form-control"> | |
| <option value="0">Pilih Status Vaksin</option> | |
| <option value="1">Belum Vaksin</option> | |
| <option value="2">Dosis Pertama</option> | |
| <option value="3">Dosis Kedua</option> | |
| <option value="3">Dosis Booster</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"]["alamat"].value == "") { | |
| alert("Alamat Tidak Boleh Kosong"); | |
| document.forms["formPendaftaran"]["alamat"].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"]["jurusan"].selectedIndex < 1) { | |
| alert("Pilih Jurusan"); | |
| document.forms["formPendaftaran"]["jurusan"].focus(); | |
| return false; | |
| } | |
| if (document.forms["formPendaftaran"]["status_vaksinasi"].selectedIndex < 1) { | |
| alert("Pilih Status Vaksinasi"); | |
| document.forms["formPendaftaran"]["status_vaksinasi"].focus(); | |
| return false; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| </html> |
Comments
Post a Comment