JavaScript

Merespons peristiwa formulir

Anda dapat menggunakan JavaScript untuk merespons interaksi pengguna di formulir, menampilkan kolom formulir tambahan, mengirimkan formulir, dan banyak lagi.

Membantu pengguna mengisi kontrol formulir tambahan

Bayangkan Anda membuat formulir survei. Setelah pengguna memilih satu opsi, Anda ingin menampilkan <input> tambahan untuk mengajukan pertanyaan tertentu yang terkait dengan pilihan tersebut. Bagaimana cara menampilkan elemen <input> yang relevan saja?

Anda dapat menggunakan JavaScript untuk menampilkan <input> hanya jika <input type="radio"> terkait saat ini dipilih.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

Mari kita lihat kode JavaScript untuk demo. Apakah Anda melihat atribut aria-controls dan aria-expanded? Gunakan atribut ARIA ini untuk membantu pengguna pembaca layar memahami kapan kontrol formulir tambahan ditampilkan atau disembunyikan.

Memastikan pengguna dapat mengirimkan formulir tanpa keluar dari halaman

Bayangkan Anda memiliki formulir komentar. Saat pembaca menambahkan komentar dan mengirimkan formulir, akan lebih baik jika mereka dapat langsung melihat komentar tanpa memuat ulang halaman.

Untuk mencapai hal ini, dengarkan peristiwa onsubmit, lalu gunakan event.preventDefault() untuk mencegah perilaku default, dan kirim FormData menggunakan Fetch API.

Browser Support

  • Chrome: 42.
  • Edge: 14.
  • Firefox: 39.
  • Safari: 10.1.

Source

Skrip backend Anda dapat memeriksa apakah permintaan POST tampaknya berasal dari browser (menggunakan atribut action dari elemen formulir, dengan method="post") atau dari JavaScript, seperti permintaan fetch().

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Selalu beri tahu pengguna pembaca layar tentang perubahan konten dinamis. Tambahkan elemen dengan atribut aria-live="polite" ke HTML Anda, dan perbarui konten elemen setelah perubahan. Misalnya, perbarui teks menjadi 'Komentar Anda berhasil diposting', setelah pengguna mengirimkan komentar.

Pelajari area aktif ARIA lebih lanjut.

Validasi dengan JavaScript

Pastikan pesan error selaras dengan gaya dan nuansa situs Anda

Kata-kata pesan error default berbeda-beda di antara browser. Bagaimana cara memastikan pesan yang sama ditampilkan kepada semua pengguna, dan pesan tersebut sesuai dengan gaya dan nuansa situs Anda? Gunakan metode setCustomValidity() dari Constraint Validation API untuk menentukan pesan error Anda sendiri.

Memastikan pengguna diberi tahu tentang error secara real time

Fitur HTML bawaan untuk validasi formulir sangat cocok untuk memberi tahu pengguna tentang kolom formulir yang tidak valid sebelum data dikirim ke backend Anda. Bukankah akan lebih baik jika pengguna diberi tahu segera setelah mereka meninggalkan kolom formulir?

Proses peristiwa blur yang diaktifkan saat elemen kehilangan fokus, dan gunakan antarmuka ValidityState untuk mendeteksi apakah kontrol formulir tidak valid.

Memastikan pengguna dapat melihat sandi yang mereka masukkan

Teks yang dimasukkan untuk <input type="password"> disamarkan secara default, untuk menghormati privasi pengguna. Bantu pengguna memasukkan sandi mereka, dengan menampilkan <button> untuk mengalihkan visibilitas teks yang dimasukkan.

Coba demonya. Alihkan visibilitas teks yang dimasukkan, dengan menggunakan Tampilkan Sandi <button>. Bagaimana cara kerjanya? Mengklik Tampilkan Sandi, akan mengubah atribut type kolom sandi dari type="password" menjadi type="text", dan teks <button> akan berubah menjadi 'Sembunyikan Sandi'.

Penting untuk membuat tombol Tampilkan Sandi dapat diakses. Hubungkan <button> dengan <input type="password"> menggunakan atribut aria-controls.

Untuk memberi tahu pengguna pembaca layar jika sandi saat ini ditampilkan atau disembunyikan, gunakan elemen tersembunyi dengan aria-live="polite", dan ubah teksnya sebagaimana mestinya. Penting untuk memungkinkan pengguna pembaca layar mengetahui kapan sandi ditampilkan dan terlihat oleh orang lain yang melihat layar mereka.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

Pelajari lebih lanjut cara menerapkan opsi tampilkan sandi.

Resource