Tugas 4 (Validasi Form menggunakan JQuery)
Nama: Azzura Mahendra Putra Malinus
NRP: 5025201211
Kelas: Pemrograman Web A
Tahun Ajaran: 2022/2023
Link Repository: Repository
Pada pertemuan ini, kami diberikan tugas untuk membuat sebuah form dengan validasi menggunakan JQuery (sebuah pustaka Javascript). Form tersebut adalah sebuah form input data mahasiswa dengan beberapa isian, seperti nim, nama, alamat, tanggal lahir, umur, alamat email, alamat situs, dan password. Setiap dari isian akan diberikan validasi agar user menginput sesuai dengan aturan yang ditetapkan, misalkan nim harus berisi angka, tanggal lahir harus memiliki format DD/MM/YYYY, dll.
Kode Sumber
index.html
<html>
<head>
<title>Validasi Form dengan JQuery Validation</title>
<style type="text/css">
.labelfrm {
display: block;
font-size: small;
margin-top: 5px;
}
.error {
font-size: small;
color: red;
}
</style>
<script type="text/javascript" src="jquery/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery.validate.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",
minlenght: "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) {
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" size="15" class="required"/>
<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>
Tampilan Form dengan Validasi
Sekian dari blog ini, terima kasih sudah membaca!
Komentar
Posting Komentar