0Pricing
HTML Academy · Pelajaran

reportValidity dan setCustomValidity

Picu antarmuka validasi peramban dan tetapkan pesan kesalahan khusus.

reportValidity dan setCustomValidity adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Dua API untuk Pengalaman Pengguna Bawaan

API Validasi Batasan menyediakan dua metode yang mengendalikan antarmuka validasi bawaan peramban: reportValidity (menampilkan petunjuk) dan setCustomValidity (menyediakan pesan kesalahan kustom). Keduanya memungkinkan Anda menyesuaikan pesan sambil tetap menggunakan tampilan bawaan.

reportValidity dibandingkan dengan checkValidity

checkValidity() secara diam-diam mengembalikan true/false—tanpa efek samping pada antarmuka. reportValidity() melakukan pemeriksaan yang sama, tetapi juga memfokuskan bidang pertama yang tidak valid dan menampilkan petunjuk validasi peramban. Pilih reportValidity jika Anda ingin memperoleh pengalaman pengguna bawaan tanpa usaha tambahan.

document.forms.signup.addEventListener("submit", (e) => {
  if (!e.target.reportValidity()) {
    e.preventDefault();
    // browser already focused first invalid field and showed tooltip
  }
});

Validasi Terprogram

Untuk alur bertahap, validasi bidang pada setiap tahap sebelum melanjutkan: if (step.reportValidity()) { next(); }. Peramban menangani tampilan kesalahan dan memfokuskan pengguna pada bidang yang perlu diperhatikan, sehingga Anda tidak perlu menerapkan ulang pengelolaan fokus.

setCustomValidity Mengganti Pesan

Pesan bawaan ("Silakan isi bidang ini") mungkin tidak sesuai dengan gaya bahasa Anda. input.setCustomValidity("Username is required") mengganti pesan bawaan dengan teks Anda. Bidang tersebut dianggap tidak valid sampai pesannya dihapus.

Menghapus Pesan Kustom

input.setCustomValidity("") menghapus pesan kustom dan mengaktifkan kembali validasi normal. Panggil ini setiap kali Anda melakukan validasi ulang; jika tidak, pesan kustom yang sudah kedaluwarsa akan tetap muncul meskipun pengguna telah memperbaiki masalahnya.

input.addEventListener("input", () => {
  if (input.value.length < 3) {
    input.setCustomValidity("Must be at least 3 characters");
  } else {
    input.setCustomValidity("");
  }
});

Validasi Asinkron

Untuk pemeriksaan sisi server (keunikan nama pengguna dan validitas kupon), gunakan setCustomValidity setelah respons asinkron diterima: const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken");. Peramban segera menggunakan status validitas yang baru.

Memadukan dengan Antarmuka Kesalahan Kustom

Untuk menggunakan tampilan kesalahan Anda sendiri sambil tetap memperoleh pelacakan validitas, dengarkan peristiwa invalid dan panggil e.preventDefault() untuk menekan petunjuk bawaan: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); }).

Beberapa Batasan Kustom

setCustomValidity hanya mendukung satu pesan kustom pada satu waktu. Untuk menerapkan beberapa aturan, periksa setiap aturan lalu panggil setCustomValidity dengan pesan yang paling relevan berdasarkan urutan prioritas. Aturan pertama yang gagal adalah aturan yang pesannya ditampilkan.

Jangan Tumpang Tindih dengan Validasi Bawaan

Jika Anda menetapkan pesan kustom untuk bidang wajib yang kosong, pesan Anda dan pesan bawaan dapat saling bertentangan. Pilih satu pendekatan untuk setiap bidang: nonaktifkan batasan bawaan (gunakan type="text" alih-alih type="email" dan lakukan validasi melalui setCustomValidity), atau percayakan sepenuhnya pada validasi bawaan.

Validasi Kustom Tingkat Formulir

Untuk validasi lintas bidang (mencocokkan konfirmasi kata sandi), terapkan setCustomValidity pada bidang terkait: confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match"). Formulir tidak valid sampai keduanya cocok.

Internasionalisasi

Pesan bawaan dilokalkan oleh peramban berdasarkan bahasa pengguna. Pesan kustom yang ditetapkan melalui setCustomValidity harus Anda tulis sendiri dalam bahasa yang tepat—baca navigator.language atau status i18n Anda sendiri, lalu berikan terjemahan yang sesuai.

Pengujian

Buka DevTools dan coba setiap skenario tidak valid: pengiriman kosong, masukan sebagian, format yang tidak cocok, dan kegagalan asinkron. Pastikan pesan yang tepat ditampilkan, perbaikan masalah menghapus pesan tersebut, dan pengiriman formulir yang valid dapat dilanjutkan. Kasus tepi (menempelkan format yang tidak valid dan pengisian otomatis oleh peramban) memerlukan pengujian khusus.

Pemeriksaan Pengetahuan

Setelah memanggil input.setCustomValidity("Sudah digunakan"), bagaimana cara memberi tahu peramban bahwa bidang tersebut kembali valid?

Ringkasan

reportValidity memicu antarmuka validasi bawaan peramban (fokus dan petunjuk), sehingga sangat cocok untuk pemeriksaan terprogram. setCustomValidity mengganti pesan bawaan dengan teks Anda—hapus dengan string kosong saat bidang kembali valid. Dengarkan peristiwa invalid dengan preventDefault untuk menampilkan kesalahan sepenuhnya secara kustom. Gunakan pendekatan ini untuk validasi lintas bidang, pemeriksaan asinkron, dan pesan kustom yang dilokalkan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “reportValidity dan setCustomValidity” gratis?

Ya — teks lengkap “reportValidity dan setCustomValidity” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “reportValidity dan setCustomValidity”?

Picu antarmuka validasi peramban dan tetapkan pesan kesalahan khusus. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “reportValidity dan setCustomValidity” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. FormData API
  2. Constraint Validation API
  3. reportValidity dan setCustomValidity
  4. Peristiwa Reset Formulir dan Pengelolaan Status
← Kembali ke HTML Academy