Taqarra's blog

Membuat Validasi Form

Nama : Taqarra Rayhan Irfandianto

NRP : 05111940000121

Kelas : PWEB - B

Link

Source Code : eeb12/PWEB-tugasJS

Website : Website Form pendaftaran

Pada kesempatan kali ini saya mendapatkan tugas untuk mengimplementasikan Javascript dan HTML dalam pembuatan validasi form. Berikut adalah tampilan websitenya :

	<!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">
	<link href="style.css" rel="stylesheet" type="text/css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
	integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
	<title>Form Pendaftaran</title>
	</head>
	<body>
	<nav class="navbar sticky-top navbar-dark bg-success bg-gradient py-3">
	<div class="container-fluid d-flex justify-content-center">
	<a class="navbar-brand fs-3 font-monospace" href="index.html">Form Validasi Vaksin Mahasiswa FTEIC</a>
	</div>
	</nav>

	<div class="bg-light bg-gradient container mx-auto my-4 border border-secondary rounded-3 shadow col-6">


	<form name="formPendaftaran" action = "./welcome.html" method="post" onsubmit="return validateForm()">
	<div class="form-group m-2">
	<label > Email</label>
	<input type="email" name = "email" class = "form-control" class="form-control mt-1" placeholder="Email aktif" minlength="5"maxlength="50">
	</div>

	<div class="form-group m-2">
	<label>No Handphone</label>
	<input type="text" name="handphone" placeholder="No Handphone" class="form-control mt-1" minlength="5"
	maxlength="15" >
	</div>

	<div class="form-group m-2">
	<label> Password</label><br>
	<input type="password" name = "password" class="form-control mt-1" placeholder="Password">
	</div>

	<div class="form-group m-2">
	<label> Nama</label><br>
	<input type="text" name = "nama" class="form-control mt-1" placeholder="Nama Lengkap">
	</div>

	<div class="form-group m-2">
	<label> NRP</label><br>
	<input type="text" name = "nrp" class="form-control mt-1" placeholder="0xxx">
	</div>

	<div class="form-group m-2">
	<label>Departemen</label>
	<select name="departemen" class="form-control form-select mt-1">
	<option selected>Pilih Departemen</option>
	<option value="1">Departemen Teknik Elektro</option>
	<option value="2">Departemen Teknik Biomedik</option>
	<option value="3">Departemen Teknik Komputer</option>
	<option value="4">Departemen Teknik Informatika</option>
	<option value="5">Departemen Sistem Informasi</option>
	<option value="6">Departemen Teknologi Informasi</option>

	</select>
	</div>

	<div class="form-group m-2">
	<label>Alamat Domisili</label>
	<input type="text" name="alamat" placeholder="Alamat Domisili" class="form-control mt-1" minlength="10"
	maxlength="50" >
	</div>

	<div class="form-group m-2">
	<label>Status Vaksin</label>
	<select name="vaksin" class="form-control form-select mt-1">
	<option selected>Pilih Status Vaksin</option>
	<option value="1">Belum Vaksin</option>
	<option value="2">Vaksin 1</option>
	<option value="3">Vaksin 2</option>
	</select>
	</div>





	<input type="submit" style="background-color: #4CAF50;padding: 12px 12px; width: 100% ;color: white; margin: 4px 2px;
	cursor: pointer;" value = "sign up">
	</form>
	</div>
	</body
	>

	<script>
	function isNumeric(str) {
	if (typeof str != "string") return false // we only process strings!
	return !isNaN(str) &&
	// use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
	!isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
	}

	function validateForm() {
	if (document.forms["formPendaftaran"]["email"].value == "") {
	alert("Email Tidak Boleh Kosong");
	document.forms["formPendaftaran"]["email"].focus();
	return false;
	}
	if (!isNumeric(document.forms["formPendaftaran"]["handphone"].value)) {
	alert("no hp harus berisi angka");
	document.forms["formPendaftaran"]["handphone"].focus();
	return false;
	}
	if (document.forms["formPendaftaran"]["password"].value == "") {
	alert("Password Tidak Boleh Kosong");
	document.forms["formPendaftaran"]["password"].focus();
	return false;
	}
	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 (!isNumeric(document.forms["formPendaftaran"]["nrp"].value)) {
	alert("NRP harus berisi angka");
	document.forms["formPendaftaran"]["nrp"].focus();
	return false;
	}

	if (document.forms["formPendaftaran"]["departemen"].selectedIndex < 1) {
	alert("Pilih Departemen.");
	document.forms["formPendaftaran"]["departemen"].focus();
	return false;
	}
	if (document.forms["formPendaftaran"]["domisili"].value == "") {
	alert("Masukkan Domisili anda saat ini");
	document.forms["formPendaftaran"]["domisili"].focus();
	return false;
	}
	if (document.forms["formPendaftaran"]["vaksin"].selectedIndex < 1) {
	alert("Pilih Status Vaksin.");
	document.forms["formPendaftaran"]["vaksin"].focus();
	return false;
	}

	}
	</script>
	</html>

view raw index.html hosted with ❤ by GitHub

Search This Blog

Taqarra's blog

Membuat Validasi Form

Comments

Post a Comment

Popular posts from this blog

Login Boootstrap

Tugas 3 RK D