Tugas Javascript
Pada tugas ini diminta untuk membuat form validasi
Berikut ini adalah websitenya dan Link Website
dan berikut ini merupakan codingannya
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> | |
| <title>Belajar Form Validation</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <h1 style="text-align: center; padding-top:2%; padding-bottom: 2%; background-color:darkblue; color: white;">Form Kuliah Tatap Muka</h1> | |
| <div class="container" style="margin-top:3%"> | |
| <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 Mahasiswa" class="form-control"> | |
| </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>Departemen</label> | |
| <select name="Departemen" class="form-control"> | |
| <option value="0">Pilih Departemen</option> | |
| <option value="1">Departemen Informatika</option> | |
| <option value="2">Departemen Sistem Informasi</option> | |
| <option value="3">Departemen Teknologi Informasi</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Status Vaksinasi</label> | |
| <select name="Vaksinasi" class="form-control"> | |
| <option value="0">Pilih Status Vaksin</option> | |
| <option value="1">Sudah vaksin dosis 2</option> | |
| <option value="2">Sudah vaksin dosis 1</option> | |
| <option value="3">Belum Vaksinasi</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"]["email"].value == "") { | |
| alert("Email Tidak Boleh Kosong"); | |
| document.forms["formPendaftaran"]["email"].focus(); | |
| return false; | |
| } | |
| if (document.forms["formPendaftaran"]["Departemen"].selectedIndex < 1) { | |
| alert("Departemen Belum dipilih"); | |
| document.forms["formPendaftaran"]["Departemen"].focus(); | |
| return false; | |
| } | |
| if(document.forms["formPendaftaran"]["Vaksinasi"].selectedIndex < 1){ | |
| alert("Status Vaksinasi belum dipilih"); | |
| document.forms["formPendaftaran"]["Vaksinasi"].focus(); | |
| return false; | |
| } | |
| if(confirm("Saya sudah mengisi form dengan baik dan benar")){ | |
| txt = "You pressed OK"; | |
| }else{ | |
| txt = "You pressed NO"; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Comments
Post a Comment