“Isi kolom ini.” Kalimat itu benar — dan nyaris tidak membantu. Kolom nomor HP yang salah format hanya diberi tahu bahwa format belum cocok, tanpa contoh format yang diminta. Pesan bawaan browser memang praktis, tetapi teksnya generik dan kendalinya berada di tangan bahasa browser, bukan di tangan halaman kita.

Fakta Pesan Bawaan #

Aturannya: pesan galat bawaan ditulis dan diterjemahkan oleh pembuat browser — teksnya tetap dan tidak bisa diganti lewat HTML murni. Mekanismenya: kalimat pesan mengikuti bahasa antarmuka browser pengguna. Halaman berbahasa Indonesia yang dibuka dengan browser berbahasa Inggris menampilkan pesan berbahasa Inggris; halaman yang sama dibuka dengan browser berbahasa Indonesia menampilkan pesan Indonesia. Kita tidak bisa memaksa satu bahasa untuk semua pengunjung.

Implikasinya untuk konten Indonesia: jangan membangun penjelasan penting yang bergantung pada isi pesan bawaan — petunjuk yang benar-benar perlu dibaca harus kita tulis sendiri.

Tiga Lapis Solusi #

Pesan bawaan tidak bisa diganti, tetapi bisa dilengkapi. Tiga lapis yang saling menumpuk:

  1. title pada pattern — teks petunjuk disisipkan browser ke dalam pesan galat; HTML murni, tanpa skrip.
  2. setCustomValidity() — kode JavaScript mengganti teks pesan sepenuhnya.
  3. Pesan tertulis di bawah kolom — teks kita sendiri, tampil sebelum dan saat pengisian.

Contoh: Form Voucher #

html 
<form action="/voucher" method="post">
  <label for="kode">Kode voucher (format: KOP-2026)</label>
  <input type="text" id="kode" name="kode" pattern="[A-Z]{3}-[0-9]{4}" title="Huruf besar, tanda hubung, empat angka" required>
  <small>Contoh sah: KOP-2026, TEH-2025.</small>
  <button type="submit">Pakai voucher</button>
</form>
<script>
  const kode = document.getElementById("kode");
  kode.addEventListener("input", function () {
    if (kode.value.includes(" ")) {
      kode.setCustomValidity("Kode tidak boleh memuat spasi.");
    } else {
      kode.setCustomValidity("");
    }
  });
</script>

Tekan Pakai voucher tanpa mengisi apa pun — bubble bawaan muncul, dan perhatikan bahasanya: ia mengikuti bahasa antarmuka browser yang dipakai, bukan bahasa halaman ini. Lalu ketik kode yang memuat spasi: pesan kustom dari setCustomValidity menggantikan pesan bawaan; kode salah format tanpa spasi menampilkan pesan pola lengkap dengan petunjuk title.

Pada demo, action diarahkan ke https://example.com/voucher — domain cadangan resmi — dan skrip kecil menambahkan penahan perpindahan beserta tampilan pasangan yang terkirim; markup form dan skrip setCustomValidity-nya sama persis dengan contoh di atas.

Mari kita telaah kode di atas:

  1. Baris 2 (label memuat format): format tertulis pada label — pengguna membacanya sebelum salah, bukan setelah salah.
  2. Baris 3 (pattern + title): penolakan pola memunculkan pesan bawaan yang disisipi petunjuk title — satu-satunya kustomisasi isi pesan yang ditawarkan HTML murni.
  3. Baris 4 (small): contoh sah tersedia permanen di bawah kolom — lapis yang tidak bergantung pada browser maupun skrip.
  4. Baris 8–15 (setCustomValidity): teks “Kode tidak boleh memuat spasi.” menggantikan pesan bawaan saat spasi terdeteksi; argumen string kosong "" mengembalikan pesan bawaan — polanya ganti atau kosongkan, jangan dibiarkan terisi setelah kondisi berlalu.
  5. Baris 9 (addEventListener("input")): pemeriksaan berjalan pada tiap ketikan, sehingga status pesan selalu mutakhir.

Ringkasan #

  • Pesan bawaan ditulis pembuat browser, mengikuti bahasa antarmuka browser pengguna, dan tidak bisa diganti lewat HTML murni.
  • title pada pattern menyisipkan petunjuk ke dalam pesan galat.
  • setCustomValidity() mengganti teks pesan; string kosong mengembalikan pesan bawaan.
  • Format dan contoh sah ditulis pada label serta di bawah kolom sebelum galat terjadi.

Chapter penutup section ini menegaskan posisi seluruh materi: sampai mana validasi HTML berdiri, dan titik mana ia berhenti.