TUGAS 6 PWEB : Membuat Form Validation Menggunakan JQuery

Tugas 6

Rahmat Faris Akbar
5025201003

PWEB (B)


    Pada pertemuan kali ini kita kembali mempelajari JQuery tetapi dengan tambahan validator yang digunakan untuk mempermudah validasi inputan form. Setelah itu kita akan mencoba membuat website form dan validasinya menggunakan JQuery dengan menampilkan fungsi input dimana input yang tidak sesuai dengan format yang diinginkan maka akan diberi peringatan.


Link Penting:



Kode:

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>Form Validation | jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<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>
<header class="container text-center my-5">
<h3>FORMULIR DATA MAHASISWA</h3>
</header>
<form class="container" id="mhsForm">
<div class="mb-3">
<label for="nrp" class="form-label">NRP</label>
<input type="text" class="form-control" name="nrp" id="nrp" required>
</div>
<div class="mb-3">
<label for="nama" class="form-label">Nama</label>
<input type="text" class="form-control" name="nama" id="nama" required>
</div>
<div class="mb-3">
<label for="tglLahir" class="form-label">Tanggal Lahir</label>
<input type="date" class="form-control" id="tglLahir" required>
</div>
<div class="mb-3">
<label for="alamat" class="form-label">Alamat Lengkap</label>
<textarea name="alamat" id="alamat" class="form-control" cols="30" rows="4" required></textarea>
</div>
<div class="mb-3">
<label for="email" class="form-label">Alamat Email</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" name="password" id="password" required>
</div>
<div class="mb-3">
<label for="ulangiPassword" class="form-label">Ulangi Password</label>
<input type="password" class="form-control" name="ulangiPassword" id="ulangiPassword" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script src="main.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

main.js
$(document).ready(() => {
$("#mhsForm").validate({
rules: {
nrp: {
digits: true,
minlength: 10,
maxlength: 10
},
nama: {
maxlength: 100
},
tglLahir: {
indonesianDate: true
},
email: {
email: true
},
password: {
minlength: 8
},
ulangiPassword: {
equalTo: "#password"
}
},
messages: {
nrp: {
digits: "NRP harus memakai angka",
minlength: "NRP harus terdiri dari 10 angka",
maxlength: "NRP harus terdiri dari 10 angka"
},
email: {
email: "Email tidak valid"
},
password: {
minlength: "Password minimal terdiri dari 8 karakter"
},
ulangiPassword: {
equalTo: "Password tidak sama"
}
}
});
});
view raw main.js hosted with ❤ by GitHub

style.css
.form-text {
color: rgb(0, 0, 0);
font-size: .7rem;
}
.error {
color: red;
}
view raw style.css hosted with ❤ by GitHub


Dokumentasi Website:

Tampilan Awal :







Tampilan Ketika Terjadi Error Pada Inputan :




   





Comments

Post a Comment

Popular posts from this blog

TUGAS 7 PPB F : ViewModel and State in Compose

Image
TUGAS 7   ViewModel and State in Compose 5025201003 -  Rahmat Faris Akbar PPB (F)           Pada minggu ke-14 kelas Pemrograman Perangkat Bergerak F, kita ditugaskan membuat  aplikasi game Unscramble menggunakan Jetpack Compose dan ViewModel dari library Android Jetpack mengikuti panduan tutorial ViewModel and State in Compose . Panduan ini akan memandu kita melalui pengaturan proyek, memahami arsitektur, dan mengimplementasikan fungsionalitas game. Gambaran Proyek                Aplikasi Unscramble adalah permainan kata tunggal di mana pemain menebak kata yang diacak. Aplikasi ini menampilkan kata yang diacak, dan pemain menebak kata yang benar menggunakan semua huruf yang disediakan. Poin diberikan untuk tebakan yang benar, dan permainan melacak jumlah kata yang ditebak dengan benar. Setiap permainan terdiri dari 10 kata...
Read more

EVALUASI TENGAH SEMESTER PPB F

Image
Evaluasi Tengah Semester   Studi Kasus Aplikasi "myITS Mahasiswa" 5025201003 -  Rahmat Faris Akbar PPB (F) Link Docs:  jawaban dalam bentuk docs 1. Apa keuntungan menggunakan platform mobile Android dibandingkan dengan platform Propietary seperti Apple? Jawaban: Keterbukaan dan Fleksibilitas :  Android adalah sistem operasi yang bersifat open-source, yang memungkinkan para pengembang dan produsen perangkat untuk mengubah dan menyesuaikan sistem sesuai dengan kebutuhan mereka. Hal ini berbeda dengan iOS dari Apple yang memiliki sistem yang tertutup dan terkontrol ketat. Variasi Perangkat :  Android digunakan oleh berbagai merek dan model smartphone dan tablet, memberikan lebih banyak pilihan perangkat bagi konsumen dalam berbagai segmen harga. Sementara itu, Apple hanya menyediakan beberapa model yang umumnya berada di segmen harga lebih tinggi. Biaya Pengembangan yang Lebih Rendah :  Untuk para pengembang, masuk ke pasar Androi...
Read more

TUGAS 6 PPB F : Membuat Image Scroll dengan menggunakan Desain Material

TUGAS 6   Membuat Image Scroll dengan menggunakan Desain Material 5025201003 -  Rahmat Faris Akbar PPB (F)           Pada minggu ke-8 kelas Pemrograman Perangkat Bergerak F, kami ditugaskan membuat sebuah Image Scroll dengan menggunakan Desain Material.  Aplikasi ini akan menampilkan afirmasi dalam format kartu yang menggabungkan teks dan gambar. Mari kita mulai dengan mengeksplorasi tiga bagian utama dari kode: model data, sumber data, dan UI aplikasi. Berikut kode sumber dan tampilan aplikasi ini: Bagian 1: Mendefinisikan Model Data Pertama, kita mendefinisikan model data untuk afirmasi dalam file Affirmation.kt. Model ini sangat sederhana dan hanya berisi dua referensi ke sumber daya: satu untuk teks dan satu lagi untuk gambar. Anotasi @StringRes dan @DrawableRes digunakan untuk memastikan bahwa nilai yang diberikan adalah referensi ID yang valid dar...
Read more