Membuat validasi form menggunakan javascript
Nama: Fauzan Dzikri Rabbani
NRP: 5025221311
Kelas: Pemrograman Web (A)
Membuat validasi form menggunakan javascript
Tujuan latihan
Pada latihan ini kami belajar membuat sistem validasi form menggunakan javascript
Tampilan dan cara kerja
Berikut adalah tampilan laman web ketika dibuka
Jika pengguna tidak mengisi isian text baik nama, email, NIM, maupun Dosen akan mengeluarkan alert seperti berikut (contoh: "Email tidak boleh kosong")
Source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
body {
background-image: url("main_menu.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: Arial, sans-serif;
color: whitesmoke;
margin: 0;
padding: 0;
}
form {
background-color: black;
padding: 3px 20px 20px 20px;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
max-width: 500px;
margin: 20px auto;
}
label {
display: block;
margin-bottom: 5px;
}
select {
width: 99%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="text"] {
width: 95%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.required::after {
content: '*';
color: red;
}
button {
background-color: #bcbcbc;
color: black;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #9a9a9a;
}
input{
background-color: #bcbcbc;
}
select{
background-color: #bcbcbc;
}
</style>
</head>
<body>
<form name="form" onsubmit="return validateForm()">
<h1>Form Kehadiran</h1>
<hr> <br>
<label class="required">Nama Mahasiswa</label>
<input type="text" name="nama" placeholder="Masukkan Nama Lengkap" maxlength="30">
<br> <br>
<label class="required">Jenis Kelamin</label>
<select name="jeniskel">
<option value="0">Jenis Kelamin</option>
<option value="1">Laki-Laki</option>
<option value="2">Perempuan</option>
</select>
<br> <br>
<label class="required">Email</label>
<input type="text" name="email" placeholder="Masukkan Email Aktif">
<br> <br>
<label class="required">NIM</label>
<input type="text" name="NIM" placeholder="Masukkan NIM Aktif">
<br> <br>
<label class="required">Mata Kuliah</label>
<select name="matkul">
<option value="0">Mata Kuliah</option>
<option value="1">Struktur Data</option>
<option value="2">Pemrograman Web</option>
<option value="3">Pemrograman Berorientasi Objek</option>
</select>
<br> <br>
<label class="required">Nama Dosen</label>
<input type="text" name="dosen" placeholder="Masukkan Nama Dosen">
<br> <br>
<button>Submit</button>
</form>
<script>
function validateForm() {
if (document.forms["form"]["nama"].value == "") {
alert("Nama Tidak Boleh Kosong");
document.forms["form"]["nama"].focus();
return false;
}
if (document.forms["form"]["email"].value == "") {
alert("Email Tidak Boleh Kosong");
document.forms["form"]["email"].focus();
return false;
}
if (document.forms["form"]["jeniskel"].value == "" || document.forms["form"]["jeniskel"].value == "0") {
alert("Jenis Kelamin Tidak Boleh Kosong");
document.forms["form"]["jeniskel"].focus();
return false;
}
if (document.forms["form"]["NIM"].value == "") {
alert("NIM Tidak Boleh Kosong");
document.forms["form"]["jeniskel"].focus();
return false;
}
if (document.forms["form"]["matkul"].value == "" || document.forms["form"]["matkul"].value == "0") {
alert("Mata Kuliah Tidak Boleh Kosong");
document.forms["form"]["jeniskel"].focus();
return false;
}
if (document.forms["form"]["dosen"].value == "") {
alert("Nama Dosen Tidak Boleh Kosong");
document.forms["form"]["jeniskel"].focus();
return false;
}
}
</script>
</body>
</html>
Comments
Post a Comment