Pemrograman Web (B) - Form Validation dengan JQuery

Tampilan Awal Form

Deskripsi Tugas

Membuat sebuah website berisikan form yang akan melakukan validasi input form dengan menggunakan JQuery.

Link Repository dan Link Hasil

Link repository : https://github.com/masnurrm/pweb-form-validation-jquery

Link hasil: https://masnm.blogspot.com/2022/12/pemrograman-web-b-form-validation.html

Tampilan Awal Form

Tampilan Message Validasi

Tampilan Source Code

Code index.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />

	<title>Form Validation dengan JQuery</title>

	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="style.css" type="text/css" media="all" />
	<script type="text/javascript" src="jquery/jquery.min.js"></script>
	<script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
	</head>

	<body>
	<center>


	<div class="form-section">
	<div>
	<h1>Form Input Data Mahasiswa</h1>
	</div>

	<div class="section-card">
	<form action="proses.php" method="post" id="form-validation">
	<div>
	<label for="NRP" class="labelfrm">NRP : </label>
	<input
	type="text"
	name="NRP"
	id="NRP"
	maxlength="10"
	class="required"
	size="15"
	/>
	</div>

	<div>
	<label for="nama" class="labelfrm">Nama : </label>
	<input
	type="text"
	name="nama"
	id="nama"
	size="30"
	class="required"
	/>
	</div>

	<div>
	<label for="alamat" class="labelfrm">Alamat : </label>
	<textarea
	name="alamat"
	id="alamat"
	cols="40"
	rows="4"
	class="required"
	></textarea>
	</div>

	<div>
	<label for="tgl" class="labelfrm">Tanggal Lahir : </label>
	<input
	type="date"
	name="tgl"
	id="tgl"
	maxlength="10"
	size="15"
	class="required"
	placeholder="10/02/2003"
	/>
	</div>

	<div>
	<label for="umur" class="labelfrm">Umur : </label>
	<input
	type="number"
	name="umur"
	id="umur"
	maxlength="3"
	size="7"
	class="required"
	/>
	</div>

	<div>
	<label for="email" class="labelfrm">Email : </label>
	<input
	type="text"
	name="email"
	id="email"
	size="50"
	class="required"
	placeholder="example@gmail.com"
	/>
	</div>

	<div>
	<label for="pass1" class="labelfrm">Password : </label>
	<input
	type="password"
	name="pass1"
	id="pass1"
	size="15"
	class="required"
	/>
	</div>

	<div>
	<label for="pass2" class="labelfrm">Konfirmasi Password : </label>
	<input
	type="password"
	name="pass2"
	id="pass2"
	size="15"
	class="required"
	/>
	</div>

	<input
	type="submit"
	name="Submit"
	value="Submit"
	class="btn btn-default"
	/>
	</form>
	</div>
	</div>
	</center>
	</body>

	<script type="text/javascript">
	$(document).ready(function () {
	$("#form-validation").validate({
	rules: {
	NRP: {
	digits: true,
	minlength: 10,
	maxlength: 10,
	},
	umur: {
	digits: true,
	range: [0, 100],
	},
	email: {
	email: true,
	},
	pass2: {
	equalTo: "#pass1",
	},
	},
	messages: {
	NRP: {
	minlength: "NRP should consists of 10 digits",
	maxlength: "NRP should consists of 10 digits",
	},
	email: {
	email: "Email's format is not valid valid",
	},
	pass2: {
	equalTo: "Password is not match",
	},
	},
	});
	});
	</script>
	</html>

view raw index.html hosted with ❤ by GitHub

Code style.css

	@import url("https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,900,900i&display=swap");

	*,
	*::before,
	*::after {
	box-sizing: border-box;
	}

	html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	--select-border: #777;
	--select-focus: blue;
	--gray: #f9f9ff;
	}
	body {
	overflow-x: hidden;
	font-family: "Poppins", sans-serif;
	background-color: var(--gray);
	overflow: hidden;

	margin: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	color: #000;
	font-weight: 700;
	margin: 20px 0;
	font-family: "Poppins", sans-serif;
	margin: 0;
	padding: 0;
	}

	h1 {
	font-size: 32px;
	line-height: 40px;
	margin-bottom: 20px;
	}

	h2 {
	font-size: 28px;
	}

	h3 {
	font-size: 24px;
	}

	h4 {
	font-size: 18px;
	}

	::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	}

	::-webkit-scrollbar-thumb {
	background: #c4c4c4;
	opacity: 0.5;
	border-radius: 4px;
	}

	.btn {
	border-radius: 30px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	padding: 12px 32px;
	position: relative;
	outline: 0;
	border: none;
	}

	.btn:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
	}

	.btn-default {
	background-color: #06bcfb;
	background-image: linear-gradient(315deg, #06bcfb 0%, #4884ee 74%);
	display: inline-block;
	vertical-align: middle;
	position: relative;
	aNRPation: all 1s ease-in;
	margin-top: 2em;
	}

	main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: calc(100% / 12 * 11);
	margin: 0 auto;
	min-height: 100vh;
	}

	.bg-section {
	padding-top: 4em;
	display: flex;
	flex-direction: column;
	row-gap: 0;
	}

	.form-section {
	padding-top: 2em;
	}

	.section-card {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.28);
	padding: 35px;
	margin-bottom: 100px;
	margin-right: 300px;
	margin-left: 300px;
	border-radius: 20px;
	overflow: visible;
	text-align: center;
	position: relative;
	}

	.images {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
	overflow: hidden;
	}

	.images .layer {
	position: absolute;
	}

	.images .hello {
	max-width: 20%;
	left: 0%;
	bottom: -20%;
	}

	.images .laptop {
	max-width: 350px;
	right: 5%;
	top: 5%;
	aNRPation: left-right 20s infinite;
	}

	form {
	max-height: calc(100vh - 8em - 70px);
	overflow-y: scroll;
	}

	#form-validation {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 1em;
	}

	#form-validation > div {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 0.5em;
	}

	label {
	text-align: left;
	}

	.error {
	color: red;
	}

	input,
	textarea {
	font-family: "Poppins", sans-serif;
	}

view raw style.css hosted with ❤ by GitHub