- Inputan KTP hanya boleh diisi 16 digit angka (tidak boleh diisi huruf)
- Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY
- Inputan UMUR diisi dengan angka antara 0-100
- Inputan PASSWORD dan ULANGI PASSWORD harus sama.
<form id="form" method="post" action="proses.php">
<label for="ktp">No. KTP</label>
<input type="text" name="ktp" id="ktp" maxlength="10" size="15"/>
<label for="umur">umur</label>
<input type="text" name="umur" id="umur" maxlength="3" size="7"/>
<label for="tgl">Tanggal Lahir</label>
<input type="text" name="tgl" id="tgl" maxlength="10" size="15"/>
<label for="pass1">Password</label>
<input type="password" name="pass1" id="pass1" size="15"/>
<label for="pass2">Ulangi Password</label>
<input type="password" name="pass2" id="pass2" size="15"/>
<input class="submit" type="submit" value="Daftar"/>
</form>
Seperti artikel sebelumnya, untuk menerapkan aturan / rules validasi yang telah kita tentukan, panggil fungsi validate() saat halaman pertama kali dimunculkan. Di dalam fungsi validate() kita dapat membuat aturan-aturan di atas. Sebagai langkah awal, tambahkan potongan script berikut ini di antara tag <head>
<script type="text/javascript">
$(document).ready(function() {
$("#form").validate();
});
</script>
Pada sintak diatas,
$(document).ready(function() menerangkan bahwa perintah didalamnya dijalankan ketika halaman pertama kali muncul. $("#form") merupakan id dari form yang akan di pasang aturan validasi. Selanjutnya kita akan menerapkan aturan validasi diatas.1. Inputan KTP hanya boleh diisi 16 digit angka (tidak boleh diisi huruf)
Untuk aturan yang ini, dapat dirinci menjadi 3 rule yaitu tidak boleh huruf (digits), panjang minimal isian adalah 16 digit dan panjang maksimal juga 16digit. Kita dapat menambahkan rule pada pemanggilan fungsi validate() sehingga berubah menjadi sebagai berikut:
$('#form').validate({
rules: {
ktp: {
digits: true, minlength:10, maxlength:10
}
}
});
2. Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY
Untuk aturan ini, kita akan membuat format yang harus diisikan pada inputan tanggal. Jika format yang diinginkan adalah MM/DD/YYYY atau YYYY-MM-DD, Kkta dapat menggunakan rule bawaan JQuery yaitu menambahkan sintak date:true. Namun dalam rule diatas, diinginkan format tanggalnya adalah DD/MM/YYYY sehingga kita perlu membuat fungsi validator sendiri.
Perhatikan fungsi indonesianDate() beserta penerapannya berikut ini:
$(document).ready(function() {
$('#form').validate({
rules: {
tgl: {
indonesianDate:true
}
}
});
});
$.validator.addMethod("indonesianDate",
function(value, element) {
return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
},
"Isikan tanggal dengan format DD/MM/YYYY"
);
$(document).ready(function() {
$('#form').validate({
rules: {
tgl: {
indonesianDate:true
}
}
});
});
$.validator.addMethod("indonesianDate",
function(value, element) {
return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
},
"Isikan tanggal dengan format DD/MM/YYYY"
);
Pada aturan ini kita dapat menggunakan fungsi bawaan yaitu range serta batasan inputan berupa angka (digits).
$(document).ready(function() {
$('#form').validate({
rules: {
umur: {
digits: true,
range: [0, 100]
}
}
});
});
4. Inputan PASSWORD dan ULANGI PASSWORD harus sama
Pada aturan ini bahwa ulangi password harus sama dengan password, untuk itu kita bisa menggunakan fungsi bawaan equalsTo.
$(document).ready(function() {
$('#form').validate({
rules: {
pass2: {
qualTo: "#pass1"
}
}
});
});
Berikut sintak keseluruhan aturan 1 - 4
$(document).ready(function() {
$('#form').validate({
rules: {
nim : {
digits: true,
minlength:10,
maxlength:10
},
tgl: {
indonesianDate:true
},
umur: {
digits: true,
range: [0, 100]
},
pass2: {
equalTo: "#pass1"
}
}
});
});
$.validator.addMethod(
"indonesianDate",
function(value, element) {
return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
},
"Isikan tanggal dengan format DD/MM/YYYY"
);
0 Komentar