Aisyah Nurhalimah: Validasi menggunakan JQuery

JQuery adalah library JavaScript yang cukup andal, ringkas, dan mempunyai fitur yang cukup lengkap. Library ini membuat pemrosesan di HTML seperti perubahan dan manipulasi dokumen, event handling, animasi, dan Ajax dapat menjadi lebih sederhana.

Dipertemuan kali ini ditugaskan untuk membuat form validasi menggunakan JQuerry, berikut adalah tampilannya

dan berikut adalah source code nya,

	<html>
	<head>
	<title>Validasi Form dengan JQuery Validation - Achmatim.Net</title>
	<style type="text/css">
	body{
	background-color: rgb(216, 216, 255);
	margin: auto;
	padding: 60px;
	font: bold 14px sans-serif;
	text-align: center;
	}

	.labelfrm {
	display:block;
	font-size:20px;
	margin-top:20px;
	color :black;

	}

	h1{
	font-size: 45px;
	color :black;
	}

	.error {
	font-size:medium;
	color:red;
	}

	</style>

	<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">
	$(document).ready(function() {
	$('#frm-mhs').validate({
	rules: {
	nim : {
	digits: true,
	minlength:10,
	maxlength:10
	},
	tgl: {
	indonesianDate:true
	},
	umur: {
	digits: true,
	range: [0, 100]
	},
	email: {
	email: true
	},
	situs: {
	url: true
	},
	pass2: {
	equalTo: "#pass1"
	}
	},
	messages: {
	nim: {
	required: "Kolom NIM harus diisi",
	minlength: "Kolom NIM harus terdiri dari 10 digit",
	maxlength: "Kolom NIM harus terdiri dari 10 digit"
	},
	email: {
	required: "Alamat email harus diisi",
	email: "Format email tidak valid"
	},
	pass2: {
	equalTo: "Password tidak sama"
	}
	}
	});
	});

	$.validator.addMethod(
	"indonesianDate",
	function(value, element) {
	// put your own logic here, this is just a (crappy) example
	return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
	},
	"Please enter a date in the format DD/MM/YYYY"
	);
	</script>

	</head>
	<body>
	<h1>Input Data Mahasiswa</h1>
	<form action="proses.php" method="post" id="frm-mhs">
	<label for="nim" class="labelfrm">NIM: </label>
	<input type="text" name="nim" id="nim" maxlength="10" class="required" size="15"/>

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

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

	<label for="tgl" class="labelfrm">TANGGAL LAHIR: </label>
	<input type="text" name="tgl" id="tgl" maxlength="10" size="15" class="required"/>

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

	<label for="email" class="labelfrm">ALAMAT EMAIL: </label>
	<input type="text" name="email" id="email" size="50" class="required"/>

	<label for="situs" class="labelfrm">ALAMAT SITUS: </label>
	<input type="text" name="situs" id="situs" size="50" class="required"/>

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

	<label for="pass2" class="labelfrm">ULANGI PASSWORD: </label>
	<input type="password" name="pass2" id="pass2" size="15" class="required"/>

	<label for="submit" class="labelfrm"> </label>
	<input type="submit" name="Submit" value="Submit"/>
	</form>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

	<?php
	if (isset($_POST['Submit'])) {
	echo "<pre>";
	print_r($_POST);
	echo "</pre>";
	}
	?>

view raw proses.php hosted with ❤ by GitHub

Referensi : http://achmatim.net/2012/05/22/membuat-validasi-form-dengan-jquery-validation/

Aisyah Nurhalimah

Rabu, 12 Oktober 2022

Validasi menggunakan JQuery

Tidak ada komentar:

Posting Komentar