PWEB : Membuat Validasi Menggunakan JQuery

pada tanggal

Nama :  Azzura Ferliani Ramadhani
NRP : 5025201190
Kelas : Pemrograman Web - A
Tahun : 2022



<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>JQuery Form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"></script>
</head>
<style>
.error {
font-size:small;
color:red;
}
</style>
<body style="background-color: #f7f7f7;">
<section class="container py-4 flex-column min-vh-100 d-flex align-items-center justify-content-center">
<form id="inputMhs" class="w-100">
<fieldset>
<h1 class="mb-4" style="font-weight: bold; text-align: center;">Input Data Mahasiswa</h1>
<p>
<label for="nrp">NRP</label>
<input id="nrp" name="nrp" type="text" class="form-control" placeholder="" required>
</p>
<p>
<label for="nama">Nama</label>
<input id="nama" name="nama" type="text" class="form-control" placeholder="" required>
</p>
<p>
<label for="alamat">Alamat</label>
<textarea id="alamat" name="alamat" class="form-control" required></textarea>
</p>
<p>
<label for="tgllahir">Tanggal Lahir</label>
<input id="tgllahir" name="tgllahir" type="date" class="form-control" placeholder="" required>
</p>
<p>
<label for="umur">Umur</label>
<input id="umur" name="umur" type="number" class="form-control" placeholder="" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" class="form-control" placeholder="" required>
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" class="form-control" placeholder="" required>
</p>
<p>
<label for="ulangipassword">Konfirmasi Password</label>
<input id="ulangipassword" name="ulangipassword" type="password" class="form-control"
placeholder="" required>
</p>
<p>
<input class="submit btn btn-primary" type="submit" value="Submit" style="width: 100%; margin-top: 10px;">
</p>
</fieldset>
</form>
</section>
<script>
$(document).ready(function () {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("#inputMhs").validate({
rules: {
nrp: {
required: true,
digits: true,
minlength: 10,
},
nama: {
required: true,
},
alamat: {
required: true,
},
tgllahir: {
required: true,
dateISO: true,
},
umur: {
required: true,
digits: true,
},
email: {
required: true,
email: true,
},
password: {
required: true,
minlength: 8,
},
ulangipassword: {
required: true,
minlength: 8,
equalTo: "#password",
},
},
messages: {
nrp: {
required: "Kolom NRP perlu diisi",
digits: "Masukkan digit saja",
minlength: jQuery.validator.format("Masukkan minimal {0} angka")
},
nama: {
required: "Kolom Nama perlu diisi",
},
alamat: {
required: "Kolom Alamat perlu diisi",
},
tgllahir: {
required: "Kolom Tanggal Lahir perlu diisi",
dateISO: "Masukkan format yang sesuai (yyyy-mm-dd)",
},
umur: {
required: "Kolom Umur perlu diisi",
digits: "Masukkan digit saja",
},
email: {
required: "Kolom Email perlu diisi",
email: "Masukkan email yang valid",
},
password: {
required: "Kolom Password perlu diisi",
minlength: jQuery.validator.format("Masukkan minimal {0} karakter"),
},
ulangipassword: {
required: "Kolom Ulangi Password perlu diisi",
minlength: jQuery.validator.format("Masukkan minimal {0} karakter"),
equalTo: "Ulangi Password dengan benar"
},
},
})
});
</script>
</body>
</html>
view raw validation.html hosted with ❤ by GitHub

Komentar

Posting Komentar