Halo! Selamat datang di tutorial “Belajar jQuery bagi Pemula”!
Pengantar
jQuery adalah salah satu pustaka (library) JavaScript yang paling populer dan sering digunakan oleh developer web di seluruh dunia. jQuery membuat pekerjaan membuat interaksi dan efek pada website menjadi lebih mudah dan efisien. Dengan jQuery, Kamu dapat memilih elemen pada halaman web dengan lebih mudah dan melakukan manipulasi terhadap elemen tersebut, seperti menambahkan atau menghapus elemen, memodifikasi tampilan elemen, serta membuat efek animasi yang menarik.
Dalam tutorial ini, Kamu akan belajar dasar-dasar jQuery yang akan membantu Kamu memahami cara kerja pustaka (library) ini. Tutorial ini akan membahas beberapa topik penting, seperti cara memilih elemen dengan jQuery, bagaimana melakukan animasi pada elemen, serta bagaimana menambahkan efek-efek menarik pada halaman web. Kamu juga akan mempelajari tentang event dan bagaimana membuat interaksi pada elemen yang di klik atau disentuh.
Meskipun Kamu adalah seorang pemula dalam belajar jQuery, tutorial ini dirancang untuk membantu Kamu memahami konsep-konsep dasar dengan mudah. Tutorial ini akan memberikan contoh konkret untuk membantu Kamu memahami konsep-konsep ini secara lebih baik. Setelah menyelesaikan tutorial ini, Kamu akan memiliki pemahaman yang lebih baik tentang cara kerja jQuery dan kemampuan untuk membuat efek-efek dan interaksi menarik pada website Kamu . Selamat belajar!
Apa beda JavaScript dan jQuery
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat situs web interaktif dan responsif. Sementara itu, jQuery adalah pustaka (library)JavaScript yang menyederhanakan pengembangan situs web dengan menyediakan fungsi dan metode yang siap pakai untuk manipulasi HTML, efek animasi, dan pengiriman permintaan HTTP.
Dalam hal ini, jQuery sebenarnya adalah sebuah perpustakaan (library) atau kerangka kerja (framework) yang ditulis dalam JavaScript, yang bertujuan untuk memudahkan pengembangan situs web dengan memberikan fungsi-fungsi siap pakai yang teroptimasi.
Sementara JavaScript merupakan bahasa pemrograman yang lebih umum dan kuat, dan dapat digunakan untuk membuat aplikasi berbasis web yang kompleks. Namun, karena jQuery sudah memiliki fungsi-fungsi yang terintegrasi, maka dalam beberapa kasus, menggunakannya dapat mempercepat proses pengembangan dan mengurangi jumlah code yang harus ditulis secara manual.
Jadi, kesimpulannya adalah JavaScript adalah bahasa pemrograman yang menjadi dasar pembuatan situs web, sementara jQuery adalah pustaka (library) JavaScript yang membantu pengembangan situs web dengan menyediakan fungsi siap pakai.
Apa saja yg bisa saya lakukan dengan jQuery
Berikut adalah beberapa hal yang dapat Kamu lakukan dengan menggunakan jQuery:
- Manipulasi DOM (Document Object Model): jQuery memudahkan Kamu untuk mengambil dan memanipulasi elemen-elemen pada halaman web secara dinamis, seperti menambahkan atau menghapus elemen, mengubah properti CSS, menambahkan event handler, dan sebagainya.
- Animasi dan Efek: jQuery menyediakan banyak fungsi untuk membuat animasi dan efek visual yang menarik pada halaman web, seperti animasi slide, fade, dan bounce, efek hover, dan sebagainya.
- Ajax: jQuery memudahkan Kamu untuk mengirim permintaan HTTP dari halaman web tanpa perlu me-refresh halaman secara keseluruhan. Hal ini dapat membantu meningkatkan kecepatan dan responsivitas situs web Kamu .
- Event Handling: jQuery menyediakan metode yang mudah dipahami dan digunakan untuk menangani event pada halaman web, seperti click, hover, submit, dan sebagainya.
- Validasi Form: jQuery menyediakan plugin untuk memvalidasi input pada form yang memudahkan Kamu untuk memastikan bahwa data yang diinputkan oleh pengguna sesuai dengan format dan persyaratan tertentu.
- Manipulasi Data: jQuery menyediakan banyak fungsi untuk memanipulasi data dalam format JSON atau XML, seperti mengambil data dari server, mengubah atau menghapus data, dan sebagainya.
- Mobile Development: jQuery menyediakan plugin khusus untuk pengembangan aplikasi web mobile yang memudahkan Kamu untuk membuat tampilan yang responsif dan mudah digunakan pada perangkat mobile.
Belajar jQuery
Langkah awal untuk mulai menggunakan jQuery
Untuk menggunakan jQuery di website, ikuti langkah-langkah berikut:
1. Download jQuery library dari situs resmi jQuery: https://jquery.com/download/
2. Buat File index.html dan masukan jQuery di dalam nya.
Tambahkan code berikut ke dalam file HTML Kamu :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contoh Penggunaan jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h1>Contoh Penggunaan jQuery</h1>
<p>Klik untuk menyembunyikan paragraf ini.</p>
<p>Paragraf ini juga bisa disembunyikan.</p>
</body>
</html>jika kalian menggunakan folder pastikan bahwa path/to/jquery.min.js sesuai dengan lokasi file jQuery pada lokal komputer kamu.
3. Penjelasan jQuery di dalam file index.html.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>code di atas akan menyembunyikan elemen p ketika diklik. Kamu dapat mengubah code tersebut sesuai kebutuhan Kamu.
Dengan mengikuti langkah-langkah di atas, Kamu dapat mulai menggunakan jQuery di website Kamu . Ingatlah untuk selalu menempatkan code jQuery di dalam tag <script> untuk memastikan bahwa JavaScript dijalankan dengan benar di dalam website Kamu.
Selector pada jQuery
jQuery Selector digunakan untuk memilih dan mengekstrak elemen HTML yang akan dimanipulasi dengan menggunakan jQuery. Berikut adalah beberapa contoh jQuery selector dan penggunaannya:
1. Selector Berdasarkan Tag: Selector ini digunakan untuk memilih elemen HTML berdasarkan nama tag-nya. Contoh penggunaannya adalah sebagai berikut:
$("p") // akan memilih semua elemen <p>2. Selector Berdasarkan ID: Selector ini digunakan untuk memilih elemen HTML berdasarkan ID-nya. Contoh penggunaannya adalah sebagai berikut:
$("#myId") // akan memilih elemen dengan ID "myId"
3. Selector Berdasarkan Class: Selector ini digunakan untuk memilih elemen HTML berdasarkan kelas-nya. Contoh penggunaannya adalah sebagai berikut:
$(".myClass") // akan memilih semua elemen dengan kelas "myClass"
4. Selector Berdasarkan Atribut: Selector ini digunakan untuk memilih elemen HTML berdasarkan nilai atributnya. Contoh penggunaannya adalah sebagai berikut:
$("input[type='text']") // akan memilih semua elemen input dengan tipe "text"
5. Selector Berdasarkan Hubungan Elemen: Selector ini digunakan untuk memilih elemen HTML berdasarkan hubungan atau struktur dengan elemen lainnya. Contoh penggunaannya adalah sebagai berikut:
$("ul li") // akan memilih semua elemen <li> yang berada dalam elemen <ul>
6. Selector Berdasarkan Posisi: Selector ini digunakan untuk memilih elemen HTML berdasarkan posisinya dalam dokumen HTML. Contoh penggunaannya adalah sebagai berikut:
$("ul li:first") // akan memilih elemen <li> pertama dalam elemen <ul>
7. Selector Berdasarkan Filter: Selector ini digunakan untuk memilih elemen HTML berdasarkan kondisi atau kriteria tertentu. Contoh penggunaannya adalah sebagai berikut:
$("p:contains('Lorem')") // akan memilih semua elemen <p> yang mengandung kata "Lorem"
8. Selector Berdasarkan Parent: Selector ini digunakan untuk memilih elemen HTML berdasarkan elemen parent-nya. Contoh penggunaannya adalah sebagai berikut:
$("ul > li") // akan memilih semua elemen <li> yang langsung berada dalam elemen <ul>
9. Selector Berdasarkan Visible: Selector ini digunakan untuk memilih elemen HTML yang saat ini terlihat pada halaman web. Contoh penggunaannya adalah sebagai berikut:
$(":visible") // akan memilih semua elemen HTML yang saat ini terlihat pada halaman web
10. Selector Berdasarkan Hidden: Selector ini digunakan untuk memilih elemen HTML yang saat ini tidak terlihat pada halaman web. Contoh penggunaannya adalah sebagai berikut:
$(":hidden") // akan memilih semua elemen HTML yang saat ini tidak terlihat pada halaman web
11. Selector Berdasarkan Navigasi: Selector ini digunakan untuk memilih elemen HTML berdasarkan posisi relatifnya terhadap elemen lainnya, seperti elemen sebelum atau setelahnya. Contoh penggunaannya adalah sebagai berikut:
$("p:first").next() // akan memilih elemen yang berada setelah elemen <p> pertama
12. Selector Berdasarkan Bentuk Elemen: Selector ini digunakan untuk memilih elemen HTML berdasarkan bentuk atau jenisnya, seperti elemen input, button, atau checkbox. Contoh penggunaannya adalah sebagai berikut:
$("input:checkbox") // akan memilih semua elemen <input> dengan tipe "checkbox"
Semoga contoh-contoh selector di atas dapat membantu Kamu lebih memahami penggunaan selector pada jQuery.
Manipulasi DOM pada jQuery
Manipulasi DOM (Document Object Model) adalah salah satu fitur paling dasar dari jQuery. Dengan menggunakan jQuery, Kamu dapat mengambil, menambah, atau mengubah elemen pada halaman web secara dinamis tanpa harus memuat ulang halaman.
Berikut adalah beberapa contoh manipulasi DOM pada jQuery:
1. Memilih elemen: Untuk memilih elemen pada halaman web, Kamu dapat menggunakan fungsi $() atau jQuery(). Contoh:
$(document).ready(function() {
// Memilih elemen dengan ID "judul"
$('#judul').text('Judul baru');
// Memilih elemen dengan class "paragraf"
$('.paragraf').css('color', 'red');
});
2. Menambah elemen: Untuk menambahkan elemen baru pada halaman web, Kamu dapat menggunakan fungsi append(), prepend(), atau after(). Contoh:
$(document).ready(function() {
// Menambahkan elemen <p> setelah elemen dengan ID "judul"
$('#judul').after('<p>Paragraf baru</p>');
// Menambahkan elemen <p> di dalam elemen dengan ID "container"
$('#container').append('<p>Paragraf baru</p>');
});
3. Mengubah elemen: Untuk mengubah elemen yang sudah ada pada halaman web, Kamu dapat menggunakan fungsi html(), text(), atau css(). Contoh:
$(document).ready(function() {
// Mengubah teks pada elemen dengan ID "judul"
$('#judul').text('Judul baru');
// Mengubah warna teks pada elemen dengan class "paragraf"
$('.paragraf').css('color', 'red');
// Mengubah isi HTML pada elemen dengan ID "container"
$('#container').html('<p>Paragraf baru</p>');
});
4. Menghapus elemen: Untuk menghapus elemen pada halaman web, Kamu dapat menggunakan fungsi remove(). Contoh:
$(document).ready(function() {
// Menghapus elemen dengan ID "judul"
$('#judul').remove();
// Menghapus elemen dengan class "paragraf"
$('.paragraf').remove();
});
5. Menambahkan dan menghapus class: Untuk menambahkan class pada elemen, Kamu dapat menggunakan fungsi addClass(). Sedangkan untuk menghapus class, Kamu dapat menggunakan fungsi removeClass(). Contoh:
$(document).ready(function() {
// Menambahkan class "teks-merah" pada elemen dengan ID "judul"
$('#judul').addClass('teks-merah');
// Menghapus class "teks-biru" pada elemen dengan class "paragraf"
$('.paragraf').removeClass('teks-biru');
});
6. Mengambil nilai input: Untuk mengambil nilai input pada form, Kamu dapat menggunakan fungsi val(). Contoh:
$(document).ready(function() {
// Mengambil nilai input dengan ID "nama"
var nama = $('#nama').val();
console.log(nama);
});
7. Mengubah properti CSS: Untuk mengubah properti CSS pada elemen, Kamu dapat menggunakan fungsi css(). Contoh:
$(document).ready(function() {
// Mengubah warna background pada elemen dengan ID "container"
$('#container').css('background-color', 'blue');
});
8. Menampilkan atau menyembunyikan elemen: Untuk menampilkan atau menyembunyikan elemen pada halaman web, Kamu dapat menggunakan fungsi show() atau hide(). Contoh:
$(document).ready(function() {
// Menampilkan elemen dengan ID "judul"
$('#judul').show();
// Menyembunyikan elemen dengan class "paragraf"
$('.paragraf').hide();
});
9. Mengubah ukuran elemen: Untuk mengubah ukuran elemen pada halaman web, Kamu dapat menggunakan fungsi width() atau height(). Contoh:
$(document).ready(function() {
// Mengubah lebar elemen dengan ID "gambar"
$('#gambar').width(300);
// Mengubah tinggi elemen dengan class "konten"
$('.konten').height(500);
});
10. Mengubah posisi elemen: Untuk mengubah posisi elemen pada halaman web, Kamu dapat menggunakan fungsi position() atau offset(). Contoh:
$(document).ready(function() {
// Mengubah posisi elemen dengan ID "judul"
$('#judul').position({top: 50, left: 100});
// Mengubah posisi elemen dengan class "paragraf"
$('.paragraf').offset({top: 200, left: 300});
});
11. Animasi elemen: Untuk membuat animasi pada elemen pada halaman web, Kamu dapat menggunakan fungsi animate(). Contoh:
$(document).ready(function() {
// Membuat animasi pada elemen dengan ID "gambar"
$('#gambar').animate({
opacity: 0.5,
width: '50%',
height: '50%'
}, 2000);
});
Itulah beberapa contoh manipulasi DOM pada jQuery. Dengan memahami fitur-fitur ini,
Animasi dan Efek pada jQuery
jQuery menyediakan banyak sekali fitur animasi dan efek yang dapat digunakan untuk memperindah tampilan website Kamu . Berikut adalah beberapa contoh animasi dan efek pada jQuery:
1. Animasi Dasar : seperti fadeIn(), fadeOut(), slideUp(), slideDown(), dan toggle() adalah animasi yang paling umum digunakan pada jQuery. Contoh penggunaannya adalah sebagai berikut:
$("button").click(function(){
$("p").fadeOut();
});
Code di atas akan memudarkan semua elemen <p> ketika tombol diklik.
2. Animasi Custom: Kamu dapat membuat animasi yang lebih kompleks dengan menggunakan animasi custom pada jQuery. Contoh penggunaannya adalah sebagai berikut:
$("button").click(function(){
$("div").animate({left: '250px'});
});
Code di atas akan menganimasikan elemen <div> agar bergerak ke kanan sejauh 250 piksel ketika tombol diklik.
3. Efek UI: jQuery UI menyediakan banyak sekali efek dan animasi yang dapat digunakan untuk memperindah tampilan website Kamu . Contoh penggunaannya adalah sebagai berikut:
$("button").click(function(){
$("div").effect("bounce", { times: 3 }, "slow");
});
Code di atas akan membuat elemen <div> meloncat sebanyak 3 kali dengan efek bounce ketika tombol diklik.
4. Efek toggle digunakan untuk menyembunyikan atau menampilkan elemen HTML. Contoh penggunaannya adalah sebagai berikut:
$("button").click(function(){
$("p").toggle("slow");
});
Code di atas akan menyembunyikan atau menampilkan elemen <p> dengan efek slow ketika tombol diklik.
5. Efek Scroll digunakan untuk menganimasikan pergerakan halaman website saat pengguna melakukan scroll. Contoh penggunaannya adalah sebagai berikut:
$(window).scroll(function() {
$("h1").css("font-size", (40 + $(this).scrollTop() / 5) + "px");
});
Code di atas akan mengubah ukuran font elemen <h1> berdasarkan posisi scroll pengguna.
6. Efek Tooltip: digunakan untuk menampilkan informasi tambahan saat pengguna mengarahkan kursor ke sebuah elemen. Contoh penggunaannya adalah sebagai berikut:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
Code di atas akan menampilkan tooltip pada elemen yang memiliki atribut data-toggle="tooltip".
7. Efek Parallax: digunakan untuk membuat tampilan website menjadi lebih menarik dengan memberikan efek kedalaman pada latar belakang. Contoh penggunaannya adalah sebagai berikut:
$(window).scroll(function() {
var yPos = -(($(window).scrollTop() / 2) - 150);
var coords = '50% '+ yPos + 'px';
$('body').css({ backgroundPosition: coords });
});
Code di atas akan memberikan efek parallax pada latar belakang halaman website.
8. Efek modal: digunakan untuk menampilkan konten tambahan pada sebuah overlay di atas halaman website. Contoh penggunaannya adalah sebagai berikut:
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
Code di atas akan menampilkan modal ketika elemen dengan ID myBtn diklik.
9. Efek ScrollSpy digunakan untuk menandai navigasi saat pengguna melakukan scroll ke bagian yang berbeda pada halaman website. Contoh penggunaannya adalah sebagai berikut:
$('body').scrollspy({ target: '.navbar', offset: 50 });
Code di atas akan menandai navigasi pada elemen dengan kelas navbar saat pengguna melakukan scroll pada halaman website.
10. Animasi easing digunakan untuk memberikan efek pergerakan pada elemen dengan kecepatan yang bervariasi. Contoh penggunaannya adalah sebagai berikut:
$("#myBtn").click(function(){
$("#box").animate({height: '300px', opacity: '0.6'}, "slow", "easeOutBounce");
});
Code di atas akan memberikan efek pergerakan pada elemen dengan ID box dengan kecepatan easing easeOutBounce.
Itulah beberapa contoh animasi dan efek pada jQuery. Kamu dapat mempelajari lebih lanjut tentang animasi dan efek pada dokumentasi resmi jQuery.
Ajax pada jQuery
Penggunaan Ajax pada jQuery, saya akan menjelaskan sedikit tentang bagaimana menggunakan Ajax dengan jQuery.
Ajax merupakan singkatan dari Asynchronous JavaScript and XML. Ajax memungkinkan kita untuk memuat data dari server tanpa harus memuat ulang halaman web secara keseluruhan. Dalam jQuery, kita dapat menggunakan method $.ajax() atau $.post() atau $.get() untuk melakukan request Ajax.
Berikut adalah contoh penggunaan Ajax dengan jQuery menggunakan method $.ajax():
$.ajax({
url: "data.php", // URL server
type: "POST", // metode request
data: { name: "John", age: 30 }, // data yang ingin dikirim ke server
dataType: "json", // tipe data yang diharapkan dari server
success: function(response) {
// callback function yang dijalankan jika request berhasil
console.log(response);
},
error: function(xhr, status, error) {
// callback function yang dijalankan jika request gagal
console.log(xhr.responseText);
}
});
Contoh di atas akan mengirimkan data { name: "John", age: 30 } ke server dengan URL data.php menggunakan metode POST. Jika request berhasil, response dari server akan dicetak di console. Jika request gagal, pesan error akan dicetak di console.
Selain menggunakan $.ajax(), kita juga dapat menggunakan method $.get() atau $.post(). Berikut adalah contoh penggunaan $.get():
$.get("data.php", { name: "John", age: 30 }, function(response) {
console.log(response);
}, "json");
Contoh di atas melakukan request GET ke server dengan URL data.php dengan mengirimkan data { name: "John", age: 30 }. Jika request berhasil, response dari server akan dicetak di console dalam format JSON.
Demikianlah penjelasan tentang penggunaan Ajax dengan jQuery. Semoga membantu!
Event Handling pada jQuery
Event Handling pada jQuery adalah proses menangani aksi atau peristiwa yang terjadi pada elemen HTML, seperti pengguna mengklik, mengarahkan kursor mouse, atau mengisi formulir. Dalam jQuery, kita dapat menggunakan method .on() untuk menambahkan event handler pada elemen HTML.
Berikut adalah contoh penggunaan method .on() untuk menangani event click pada sebuah tombol:
$("#myButton").on("click", function() {
// kode yang dijalankan ketika tombol di klik
alert("Button clicked!");
});
Contoh di atas menambahkan event handler untuk event click pada elemen HTML dengan id myButton. Ketika tombol tersebut diklik, akan muncul pesan alert “Button clicked!”.
Kita juga dapat menambahkan event handler untuk event lainnya, seperti event submit pada form, event mouseover pada elemen HTML, dan event keypress pada elemen input. Berikut adalah contoh penggunaan method .on() untuk menangani event submit pada sebuah form:
$("#myForm").on("submit", function(event) {
event.preventDefault(); // mencegah form untuk submit secara default
// kode yang dijalankan ketika form di submit
alert("Form submitted!");
});
Contoh di atas menambahkan event handler untuk event submit pada elemen form dengan id myForm. Ketika form tersebut di submit, akan muncul pesan alert “Form submitted!” dan form tidak akan submit secara default.
Selain menggunakan method .on(), kita juga dapat menggunakan method lain seperti .click(), .submit(), .mouseover(), dan .keypress() untuk menangani event tertentu.
Properti pada .on() di jQuery
Method atau fungsi .on() pada jQuery memiliki beberapa properti atau parameter yang dapat digunakan untuk menentukan event handler yang akan dijalankan. Berikut adalah beberapa properti yang dapat digunakan pada method .on():
1. events : Properti ini digunakan untuk menentukan event yang akan ditangani oleh event handler. Properti ini bisa berisi satu atau lebih event, seperti click, submit, mouseover, dan lain-lain. Contohnya:
$("button").on("click", function() {
alert("Button clicked!");
});
Berikut adalah beberapa event yang dapat digunakan pada properti events pada method .on() di jQuery:
click: Event ini terjadi ketika pengguna mengklik sebuah elemen HTML.dblclick: Event ini terjadi ketika pengguna mengklik sebuah elemen HTML dua kali secara berurutan.submit: Event ini terjadi ketika sebuah form disubmit.focus: Event ini terjadi ketika sebuah elemen HTML mendapatkan fokus.blur: Event ini terjadi ketika sebuah elemen HTML kehilangan fokus.change: Event ini terjadi ketika nilai sebuah elemen HTML berubah, seperti pada elemen input atau select.keydown: Event ini terjadi ketika pengguna menekan sebuah tombol keyboard.keyup: Event ini terjadi ketika pengguna melepaskan sebuah tombol keyboard.mouseenter: Event ini terjadi ketika kursor mouse memasuki sebuah elemen HTML.mouseleave: Event ini terjadi ketika kursor mouse meninggalkan sebuah elemen HTML.scroll: Event ini terjadi ketika pengguna melakukan scroll pada halaman.load: Event ini terjadi ketika sebuah halaman atau gambar selesai dimuat.unload: Event ini terjadi ketika sebuah halaman atau dokumen dihapus dari memori browser.resize: Event ini terjadi ketika ukuran jendela browser diubah.error: Event ini terjadi ketika sebuah error terjadi pada halaman atau dokumen.
Dan masih banyak lagi event yang tersedia pada properti events pada method .on() di jQuery.
2. selector : Properti ini digunakan untuk menentukan elemen HTML yang akan ditangani event handler. Properti ini bersifat opsional dan bisa diabaikan jika event handler akan ditambahkan pada elemen yang sama dengan elemen yang memanggil method .on(). Contohnya:
$("#myTable").on("click", "tr", function() {
alert("Row clicked!");
});Pada contoh di atas, event handler akan ditambahkan pada elemen #myTable, tetapi hanya akan dijalankan jika pengguna mengklik elemen tr di dalam tabel tersebut.
3. data : Properti ini digunakan untuk menentukan data yang akan dipass ke dalam event handler. Properti ini bersifat opsional dan bisa diabaikan jika tidak diperlukan. Contohnya:
$("button").on("click", { name: "John", age: 30 }, function(event) {
alert("Hello, my name is " + event.data.name + " and I'm " + event.data.age + " years old.");
});
Pada contoh di atas, event handler akan menerima data { name: "John", age: 30 } dan akan menggunakannya untuk menampilkan pesan alert.
4. handler : Properti ini adalah fungsi atau callback function yang akan dijalankan ketika event terjadi. Properti ini wajib ada dan tidak dapat diabaikan. Contohnya:
$("input[type='text']").on("keyup", function() {
var value = $(this).val();
$("span").text(value);
});
Pada contoh di atas, event handler akan dijalankan ketika pengguna mengetik pada input dengan tipe teks, dan akan mengubah teks pada elemen span sesuai dengan nilai yang diisi pada input tersebut.
Validasi Form pada jQuery
Validasi form pada jQuery dapat dilakukan dengan mudah menggunakan plugin jQuery Validation. Plugin ini menyediakan banyak fitur untuk melakukan validasi form, seperti validasi terhadap input yang kosong, validasi terhadap input dengan format tertentu, validasi terhadap panjang input, dan sebagainya.
Berikut ini adalah contoh penggunaan jQuery Validation pada form HTML sederhana:
1. Tambahkan jQuery dan plugin jQuery Validation ke halaman HTML:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
2. Buat form HTML dan tambahkan atribut id pada form dan input:
<form id="myform">
<input type="text" id="name" name="name" required>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
</form>
3. Tambahkan script untuk melakukan validasi pada form:
<script>
$(document).ready(function() {
$("#myform").validate({
rules: {
name: {
required: true,
minlength: 3
},
email: {
required: true,
email: true
}
},
messages: {
name: {
required: "Nama harus diisi",
minlength: "Nama minimal 3 karakter"
},
email: {
required: "Email harus diisi",
email: "Format email tidak valid"
}
}
});
});
</script>
Pada contoh di atas, rules digunakan untuk menentukan aturan validasi untuk setiap input, sedangkan messages digunakan untuk menentukan pesan kesalahan yang akan ditampilkan jika input tidak valid.
Dengan menggunakan plugin jQuery Validation, validasi form dapat dilakukan dengan mudah dan efisien. Selain itu, plugin ini juga menyediakan banyak fitur tambahan untuk meningkatkan pengalaman pengguna, seperti validasi secara real-time dan validasi terhadap input yang sama pada form yang berbeda.
Fungsi apa saja yg tersedia di plugin validasi
Plugin jQuery Validation menyediakan banyak fungsi untuk melakukan validasi pada form. Berikut ini adalah beberapa fungsi yang tersedia di plugin tersebut:
required: Fungsi ini digunakan untuk memastikan bahwa input tidak boleh kosong.remote: Fungsi ini digunakan untuk melakukan validasi dengan mengirim permintaan ke server.email: Fungsi ini digunakan untuk memastikan bahwa input adalah alamat email yang valid.url: Fungsi ini digunakan untuk memastikan bahwa input adalah URL yang valid.date: Fungsi ini digunakan untuk memastikan bahwa input adalah tanggal yang valid.number: Fungsi ini digunakan untuk memastikan bahwa input adalah angka yang valid.digits: Fungsi ini digunakan untuk memastikan bahwa input hanya terdiri dari digit (angka).minlength: Fungsi ini digunakan untuk memastikan bahwa input memiliki panjang karakter yang cukup.maxlength: Fungsi ini digunakan untuk memastikan bahwa input tidak melebihi panjang karakter yang diizinkan.equalTo: Fungsi ini digunakan untuk memastikan bahwa input sama dengan input lain pada form.creditcard: Fungsi ini digunakan untuk memastikan bahwa input adalah nomor kartu kredit yang valid.step: Fungsi ini digunakan untuk memastikan bahwa input memenuhi langkah yang diatur pada input number.accept: Fungsi ini digunakan untuk memastikan bahwa input adalah file dengan tipe yang diizinkan.pattern: Fungsi ini digunakan untuk memastikan bahwa input memenuhi pola tertentu yang ditentukan.
Selain fungsi di atas, plugin jQuery Validation juga menyediakan banyak opsi dan konfigurasi tambahan untuk melakukan validasi form dengan lebih canggih dan fleksibel, seperti menambahkan pesan kesalahan kustom, validasi secara real-time, validasi terhadap input yang sama pada form yang berbeda, dan sebagainya.
Contoh validasi form yg complex di jQuery
HTML:
<form id="myform">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</div>
<div>
<label for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password" name="confirm_password">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<div>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone">
</div>
<div>
<label for="age">Age:</label>
<input type="number" id="age" name="age">
</div>
<div>
<label for="terms">Terms and Conditions:</label>
<input type="checkbox" id="terms" name="terms">
</div>
<input type="submit" value="Submit">
</form>
Javascript:
$(document).ready(function() {
$("#myform").validate({
rules: {
username: {
required: true,
minlength: 5,
remote: {
url: "check_username.php",
type: "post",
data: {
username: function() {
return $("#username").val();
}
}
}
},
password: {
required: true,
minlength: 8
},
confirm_password: {
required: true,
minlength: 8,
equalTo: "#password"
},
email: {
required: true,
email: true
},
phone: {
required: true,
minlength: 10,
maxlength: 12,
digits: true
},
age: {
required: true,
min: 18,
max: 60
},
terms: {
required: true
}
},
messages: {
username: {
required: "Username is required",
minlength: "Username must be at least 5 characters",
remote: "Username already exists"
},
password: {
required: "Password is required",
minlength: "Password must be at least 8 characters"
},
confirm_password: {
required: "Please confirm your password",
minlength: "Password must be at least 8 characters",
equalTo: "Passwords do not match"
},
email: {
required: "Email is required",
email: "Invalid email address"
},
phone: {
required: "Phone number is required",
minlength: "Phone number must be at least 10 digits",
maxlength: "Phone number must be at most 12 digits",
digits: "Invalid phone number"
},
age: {
required: "Age is required",
min: "You must be at least 18 years old",
max: "You cannot be over 60 years old"
},
terms: {
required: "You must agree to the terms and conditions"
}
},
submitHandler: function(form) {
form.submit();
}
});
});Pada contoh di atas, validasi dilakukan pada form, untuk lebih jelas kamu bisa pelajari langsung di https://jqueryvalidation.org/ disana juga tersedia demo form yang bisa kamu coba, semoga membantu.
