Sebenarnya, dalam HTML sudah tersedia fungsi untuk validasi masukkan pada tag input. Dan validasi tersebut semakin berkembang pada HTML5. Namun, sayangnya beberapa validasi form pada HTML5 hanya bisa berjalan pada beberapa browser tertentu saja.Sehingga, jika kita bergantung pada validasi HTML5 maka ada kemungkinan validasi kita tidak bisa digunakan pada beberapa browser.
Untuk itulah, di sini kita akan sedikit belajar mengenai jQuery Validation, sebuah library jQuery yang berfungsi untuk melakukan validasi terhadap form yang kita buat dengan html.
JQuery plugin ini membuat klien sederhana validasi form sisi mudah, sementara masih menawarkan banyak pilihan kustomisasi. Itu membuat pilihan yang baik jika Anda sedang membangun sesuatu yang baru dari awal, tetapi juga ketika Anda mencoba untuk mengintegrasikan sesuatu ke aplikasi yang sudah ada dengan banyak markup yang ada. Plugin dibundel dengan satu set berguna metode validasi, termasuk URL dan validasi email, sambil memberikan sebuah API untuk menulis metode Anda sendiri. Semua metode dibundel datang dengan pesan error default dalam bahasa Inggris dan terjemahan ke 37 bahasa lainnya.
Plugin ini ditulis dan dipelihara oleh Jörn Zaefferer, anggota tim jQuery, pengembang utama di tim jQuery UI dan pemelihara dari QUnit. Itu dimulai kembali hari-hari awal jQuery pada tahun 2006, dan diperbarui dan diperbaiki sejak itu
Sebelum mulai belajar menggunakannya, lebih baik kita download terlebih dahulu jQuery Validation-nya di http://jqueryvalidation.org/. Sekarang, bagaimana menggunakan jQuery Validation tersebut?
1. Kita masukkan jquery dan jquery validate pada halaman kita. Mungkin bisa dilihat seperti ini:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contoh jQuery Validation</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
</head>
<body>
</body>
</html>
yang paling penting, sesuaikan nilai src dengan alamat jquery.min.js dan jquery.validate.min.js.
2. Kita buat formnya. Di sini, kita beri id pada setiap input. Biar lebih mudah, id dan name kita isi dengan nilai yang sama.
3. Kita tambahkan validasi yang kita inginkan pada tag input. Seperti required, minlength="2" atau apalah... Jangan lupa kasih type dari input itu ya. Contohnya seperti ini:
<form id="komen" method="post" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
4. Kita tambahkan script javascript ini, agar kalau semua validasi terlewati akan muncul pesan "Sudah tervalidasi". Jika kita menggunakan jQuery validation untuk sebuah aplikasi. Mungkin script ini bisa diabaikan/tidak ditulis.
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() {
alert("Sudah Tervalidasi!");
}
});
</script>5. Kita beri tambahan script javascript yang fungsinya untuk memastikan validasi dari tiap input yang ada di dalam form. Jangan lupa, sesuaikan dengan id form.
$().ready(function() {
$("#komen").validate();
});
6. Keseluruhannya nanti seperti ini:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contoh jQuery Validation</title>
<script src="../lib/jquery.js"></script>
<script src="../dist/jquery.validate.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$().ready(function() {
$("#komen").validate();
});
</script>
</head>
<body>
<form id="komen" method="post" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>
Cara di atas adalah cara yang paling mudah menggunakan jQuery Validation. Tapi bagaimana kalau kita ingin input tervalidasi tanpa harus menekan tombol submit terlebih dahulu? Ini dia caranya. Cukup ganti script ini:
$("#commentForm").validate();
dengan script ini:
$("#komen").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url: "true",
comment:"required"
},
messages: {
name: {
required: "Tolong isi nama Anda!",
minlength: "Tolong isi lebih dari 2 karakter!"
},
email: "Tolong isi sesuai dengan email!",
url: "Tolong isi sesuai dengan url!",
comment: "Tolong isi komentar Anda!"
}
});
Waktunya penjelasan...
1. rules berarti peraturan atau validasi dari input dengan name tersebut. Contoh, "email:" berarti ditujukan pada input dengan name "email", "required: true" berarti input ini harus ada isinya, "email: true" berarti input ini harus sesuai dengan validasi email.
2. messages berarti pesan yang ditampilkan apabila validasi tidak terpenuhi. Jika tidak kita tulis, maka akan diisi dengan pesan default dari jquery validation. Sesuaikan dengan rules ya!
Baiklah, itu yang bisa kita pelajari hari ini. Ketika kita mendownload jQuery Validation, di dalamnya sudah ada dokumentasi dan contoh-contoh. Jadi silahkan dipelajari sendiri lebih lanjut. Terima kasih...
Banyak banget info yg saya dapat dari artikel ini, emg postingan yg bermanfaat banget deh.. penjelasannya insyaallah mudah saya cerna, pokoknya makasih banget deh, tdk sia2 saya kunjungi artikel ini.. jangan bosen2 yah share ilmu yg lainnya :)
BalasHapusmakasih mas jadi mulai ngerti nih cara penggunanny.
BalasHapusijin share gan
BalasHapusMakasih gan informasinya, silahkan kunjungi juga neh https://belajarcaracoding.blogspot.com/2019/06/membuat-form-validasi-menggunakan-jquery.html
BalasHapusIzin untuk belajar suhu sedot ilmunya
BalasHapus