Pemrograman Web Tugas 6 - Membuat Program jQuery Validasi Form
Muhammad Lintang Panjerino
5025201045
Pemrograman Web Kelas B
Tugas 6 mata kuliah Pemrograman Web Kelas B adalah latihan membuat program jQuery untuk validasi form input. Website ini saya buat dengan menggunakan sebuah file HTML yang terhubung dengan CDN Bootstrap dan JQuery. Source code dari website ini terletak pada sebuah repository di akun Github saya dan sudah di-deploy menggunakan Github Pages.
Link Website Latihan JQuery: https://mlintang20.github.io/pemrograman-web-tugas-6/
Link Repository Github: https://github.com/mlintang20/pemrograman-web-tugas-6
Berikut adalah screenshot dari website tersebut:
Berikut adalah potongan source code:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
<title>Latihan jQuery - Validasi Form Input</title>
<style type="text/css">
.labelfrm {
display: block;
font-size: medium;
margin-top: 5px;
}
.error {
font-size: small;
color: rgb(255, 100, 100);
}
</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: {
nrp: {
digits: true,
minlength: 10,
maxlength: 20,
},
nama: {
alphabets: true,
},
tgl: {
indonesianDate: true,
},
umur: {
digits: true,
range: [0, 100],
},
email: {
email: true,
},
situs: {
url: true,
},
pass2: {
equalTo: "#pass1",
},
},
messages: {
nrp: {
required: "NRP harus diisi",
minlength: "NRP minimal harus terdiri dari 10 digit",
maxlength: "NRP maksimal harus terdiri dari 20 digit",
},
nama: {
required: "Nama harus diisi",
},
alamat: {
required: "Alamat harus diisi",
},
tgl: {
required: "Tanggal lahir harus diisi",
},
umur: {
required: "Umur harus diisi",
},
email: {
required: "Alamat email harus diisi",
email: "Format alamat email tidak valid",
},
situs: {
required: "Alamat situs harus diisi",
},
pass1: {
required: "Password harus diisi",
},
pass2: {
required: "Konfirmasi password harus diisi",
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$/);
},
'Masukkan "TANGGAL LAHIR" dengan format DD/MM/YYYY'
);
$.validator.addMethod(
"alphabets",
function (value, element) {
return value.match(/^[a-zA-Z\s]+$/);
},
"Masukkan huruf dan spasi saja"
);
</script>
</head>
<body class="bg-dark bg-gradient">
<h1 class="text-primary text-center my-3">Input Data Mahasiswa</h1>
<div class="d-flex justify-content-center mt-4">
<form action="proses.php" method="post" id="frm-mhs">
<label for="nrp" class="labelfrm text-info">NRP: </label>
<input type="text" name="nrp" id="nrp" maxlength="21" class="required" size="50" />
<label for="nama" class="labelfrm text-info">NAMA: </label>
<input type="text" name="nama" id="nama" size="50" class="required" />
<label for="alamat" class="labelfrm text-info">ALAMAT: </label>
<textarea name="alamat" id="alamat" cols="52" rows="4" class="required"></textarea>
<label for="tgl" class="labelfrm text-info">TANGGAL LAHIR: </label>
<input type="text" name="tgl" id="tgl" maxlength="10" size="50" class="required" />
<label for="umur" class="labelfrm text-info">UMUR: </label>
<input type="text" name="umur" id="umur" maxlength="3" size="50" class="required" />
<label for="email" class="labelfrm text-info">ALAMAT EMAIL: </label>
<input type="text" name="email" id="email" size="50" class="required" />
<label for="situs" class="labelfrm text-info">ALAMAT SITUS: </label>
<input type="text" name="situs" id="situs" size="50" class="required" />
<label for="pass1" class="labelfrm text-info">PASSWORD: </label>
<input type="password" name="pass1" id="pass1" size="50" class="required" />
<label for="pass2" class="labelfrm text-info">KONFIRMASI PASSWORD: </label>
<input type="password" name="pass2" id="pass2" size="50" class="required" />
<label for="submit" class="labelfrm text-info"> </label>
<div class="d-flex align-items-center justify-content-center">
<button type="submit" class="btn btn-info">Submit</button>
</div>
</form>
</div>
<footer class="mt-5 py-3 bg-primary text-center text-light">Pemrograman Web B Tugas 6 © Oktober 2022, Muhammad Lintang Panjerino</footer>
</body>
</html>
Komentar
Posting Komentar