https://github.com/ishaqadhel/pweb-homework-7
Pada Tugas Ke 7 kali ini, saya ditugaskan untuk membuat form dengan validation menggunakan JQuery. Untuk menyelesaikan tugas ini saya membuat 1 halaman HTML dengan JQuery di validation, serta menggunakan Tailwind CSS.
index.html
<!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">
<title>Tugas 7</title>
<link rel="stylesheet" href="style.css">
<link href="<https://unpkg.com/@tailwindcss/forms/dist/forms.min.css>" rel="stylesheet">
<script src="<https://cdn.tailwindcss.com>"></script>
</head>
<body class="bg-gradient-to-r from-indigo-500 to-indigo-400">
<details open>
<summary>PWEB D Tugas 7 - JQuery</summary>
<p>Ishaq Adheltyo - 05111940000167</p>
</details>
<details>
<summary>Tugas 1</summary>
<form>
<div class="mb-3">
<label for="judul" class="block text-sm font-medium text-gray-700">Judul Buku</label>
<div class="mt-1">
<input type="text" name="nameBook" id="nameBook" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Lord of the rings">
</div>
</div>
<div>
<button class="btn btn-success" type="button" id="addBook">
Tambahkan
</button>
</div>
</form>
<div class="mt-4 mb-3">
<label for="listBook" class="block text-sm font-medium text-gray-700">List Buku</label>
<select id="listBook" name="listBook" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" type="text">
</select>
</div>
</div>
</details>
<details>
<summary>Tugas 2</summary>
<div>
<form name="formPendaftaran" method="post" onsubmit="return validateForm()">
<div class="mb-3">
<label for="nrp">
NRP
</label>
<input class="form-control" id="nrp" type="text" placeholder="Masukkan NRP" maxlength="14"
name="nrp" />
<p id="nrpWarn">
NRP Tidak Boleh Kosong (minimal 3 digit angka)!</p>
</div>
<div class="mb-3">
<label for="nama">
Nama
</label>
<input class="form-control" id="nama" type="name" placeholder="Nama" name="nama" />
<p id="nameWarn">Nama
Tidak
Boleh Kosong!</p>
</div>
<div class="mb-3">
<label for="alamat">
Alamat
</label>
<textarea class="form-control" id="alamat" type="text" placeholder="Alamat"
name="alamat"></textarea>
<p id="addressWarn">
Alamat Tidak Boleh Kosong!</p>
</div>
<div class="mb-3">
<label for="tgl_lahir">
Tanggal Lahir
</label>
<input class="form-control" id="tgl_lahir" type="date" placeholder="tgl_lahir" name="tgl_lahir" />
<p id="ttlWarn">
Tanggal Lahir Tidak Boleh Kosong!</p>
</div>
<div class="mb-3">
<label for="umur">
Umur
</label>
<input class="form-control" id="umur" type="number" placeholder="Umur" name="umur" />
<p id="ageWarn">
Umur Tidak Boleh Kosong!</p>
</div>
<div class="mb-3">
<label for="email">
Email
</label>
<input class="form-control" id="email" type="email" placeholder="Email" name="email" />
<p id="emailWarn">
Email Tidak Boleh Kosong!</p>
</div>
<div class="mb-4 md:flex md:justify-between">
<div class="mb-4 md:mr-2 md:mb-0">
<label for="password">
Password
</label>
<input class="form-control" id="password" type="password" placeholder="" name="password" />
<p id="passwordWarn">
Password Tidak Boleh Kosong (Minimal 3 karakter)!</p>
</div>
<div class="md:ml-2">
<label for="confirmPassword">
Konfirmasi Password
</label>
<input class="form-control" id="confirmPassword" type="password" placeholder=""
name="checkPassword" />
<p id="confirmWarn">
Silakan Lengkapi Sesuai Password!</p>
</div>
</div>
<div class="btn-submit">
<button class="btn btn-primary" type="button" id="submitForm">
Simpan
</button>
</div>
</form>
</div>
</details>
</body>
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
$('#addBook').click(function () {
let namaBuku = $('#nameBook').val();
if (namaBuku != "") {
$('#listBook').append(`
<option value="${namaBuku}">${namaBuku}</option>
`);
alert("Buku telah ditambahkan!");
}
});
$('#submitForm').click(function validateForm() {
let isValid = true;
$('#nrpWarn').hide();
if (document.forms["formPendaftaran"]["nrp"].value < 2) {
$('#nrpWarn').show();
isValid = false;
}
$('#nameWarn').hide();
if (document.forms["formPendaftaran"]["nama"].value == "") {
$('#nameWarn').show();
isValid = false;
}
$('#addressWarn').hide();
if (document.forms["formPendaftaran"]["alamat"].value == "") {
$('#addressWarn').show();
isValid = false;
}
$('#ttlWarn').hide();
if (document.forms["formPendaftaran"]["tgl_lahir"].value == "") {
$('#ttlWarn').show();
isValid = false;
}
$('#ageWarn').hide();
if (document.forms["formPendaftaran"]["umur"].value == "") {
$('#ageWarn').show();
isValid = false;
}
$('#emailWarn').hide();
if (document.forms["formPendaftaran"]["email"].value == "") {
$('#emailWarn').show();
isValid = false;
}
let password = $('#password').val();
$('#passwordWarn').hide();
if (password.length < 3) {
$('#passwordWarn').show();
isValid = false;
}
let checkPassword = $('#confirmPassword').val();
$('#confirmWarn').hide();
if (checkPassword == "" || checkPassword !== password) {
$('#confirmWarn').show();
isValid = false;
}
if (isValid) {
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, submit it!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: 'Success!',
text: 'Your data has been submitted.',
icon: 'success',
confirmButtonColor: '#3085d6'
});
document.forms["formPendaftaran"].reset();
}
});
return false;;
}
});
</script>
</html>
style.css
*,
::before,
::after {
box-sizing: border-box;
}
form p {
color: red;
display: none;
font-style: italic;
}
details {
margin: 1rem auto;
padding: 0 1rem;
width: 35em;
max-width: calc(100% - 2rem);
position: relative;
border: 1px solid #78909c;
border-radius: 6px;
background-color: #eceff1;
color: #263238;
transition: background-color 0.15s;
}
details > :last-child {
margin-bottom: 1rem;
}
details::before {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
opacity: 0.15;
box-shadow: 0 0.25em 0.5em #263238;
pointer-events: none;
transition: opacity 0.2s;
z-index: -1;
}
details[open] {
background-color: #fff;
}
details[open]::before {
opacity: 0.6;
}
summary {
padding: 1rem 2em 1rem 0;
display: block;
position: relative;
font-size: 1.33em;
font-weight: bold;
cursor: pointer;
}
summary::before,
summary::after {
width: 0.75em;
height: 2px;
position: absolute;
top: 50%;
right: 0;
content: "";
background-color: currentColor;
text-align: right;
transform: translateY(-50%);
transition: transform 0.2s ease-in-out;
}
summary::after {
transform: translateY(-50%) rotate(90deg);
}
[open] summary::after {
transform: translateY(-50%) rotate(180deg);
}
summary::-webkit-details-marker {
display: none;
}
p {
margin: 0 0 1em;
line-height: 1.5;
}
ul {
margin: 0 0 1em;
padding: 0 0 0 1em;
}
li:not(:last-child) {
margin-bottom: 0.5em;
}
code {
padding: 0.2em;
border-radius: 3px;
background-color: #e0e0e0;
}
pre > code {
display: block;
padding: 1em;
margin: 0;
}