Pesan Kesalahan

Balon pesan “Please fill out this field” yang muncul saat form gagal dikirim adalah satu-satunya umpan balik yang dilihat pengunjung dari seluruh mekanisme validasi. Teks itu bukan karangan kita: browser yang menyusunnya, dalam bahasa sesuai pengaturan perangkat pengunjung. Chapter ini membahas asal pesan bawaan, keterbatasannya, dan cara menyusun markup yang membantu pengunjung memahami kesalahan meski pesan bawaannya terbatas.

Pesan Bawaan dan Bahasa Pengunjung #

Browser menyusun teks pesan secara otomatis saat pemeriksaan gagal, dan teks tersebut mengikuti locale — pengaturan bahasa — browser atau sistem pengunjung. Form yang sama dapat menampilkan “Please fill out this field” di komputer berbahasa Inggris dan kalimat Indonesia di komputer berbahasa Indonesia. Rumusan kalimatnya pun berbeda antar browser, sehingga kita tidak dapat mengandalkan teksnya secara harfiah.

Yang penting digarisbawahi: HTML murni tidak menyediakan atribut untuk mengganti teks balon pesan. Kita bebas menambah petunjuk di sekeliling kontrol, tetapi isi balon itu sendiri berada di luar jangkauan markup.

Keterbatasan Pesan Bawaan #

Selain tidak dapat diubah, pesan bawaan membawa sejumlah keterbatasan lain:

• Satu balon pesan pada satu waktu, untuk kontrol pertama yang gagal; kesalahan lain tidak terlihat sampai kontrol tersebut dibenahi.
• Tampilannya tidak dapat diatur dengan CSS — bentuk, warna, dan posisinya milik browser.
• Teksnya umum, misalnya hanya menyatakan nilai tidak sah, tanpa menunjukkan format yang diharapkan.
• Balon menghilang begitu fokus pindah, sehingga tidak menjadi catatan yang menetap pada halaman.

Atribut title pada kolom ber-pattern membantu sebagian: browser memasukkan teks title ke dalam pesan ketika pola tidak cocok, seperti dibahas pada Chapter Pola Validasi.

Prinsip Pesan Kesalahan yang Baik #

Perancangan pesan yang membantu pengunjung mengikuti empat prinsip berikut:

• Spesifik: sebutkan format yang diharapkan, misalnya “Lima digit angka”, alih-alih sekadar menolak isian.
• Dekat kontrol: petunjuk dan kesalahan tampil di bawah kolom yang bersangkutan, bukan hanya di atas form.
• Tidak hanya warna: sampaikan lewat teks atau ikon, karena warna saja tidak terbaca oleh semua pengunjung.
• Hadir sebelum kesalahan: petunjuk format yang terlihat sejak awal mencegah kesalahan terjadi.

Prinsip-prinsip ini bersinggungan dengan web accessibility; pembahasan lengkapnya menunggu section dengan nama yang sama. Dalam batas HTML murni, kita dapat mewujudkannya lewat label yang jelas, teks petunjuk yang selalu tampil, dan title yang menjelaskan pola.

Menyusun Markup Ramah Pesan #

Pola markup yang ramah pesan menempatkan tiga lapis informasi pada satu kelompok: label sebagai nama kolom, input dengan aturan validasinya, serta teks petunjuk kecil di bawah kontrol yang menyatakan format. Atribut aria-describedby dapat mengaitkan petunjuk itu ke kontrol bagi pembaca layar — kita sebut di sini agar mengetahui jalurnya, dengan detail di section Accessibility. Simpan file berikut sebagai contoh-pesan-kesalahan.html:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Kartu Anggota</title>
</head>
<body>
  <h1>Pembuatan Kartu Anggota Perpustakaan</h1>
  <form action="/kartu" method="post">
    <p>
      <label for="nomor">Nomor induk</label>
      <input type="text" id="nomor" name="nomor" pattern="[0-9]{10}" title="Sepuluh digit angka tanpa spasi" required aria-describedby="nomor-hint">
      <br>
      <small id="nomor-hint">Tulis 10 digit angka tanpa spasi.</small>
    </p>
    <p>
      <label for="panggilan">Nama panggilan</label>
      <input type="text" id="panggilan" name="panggilan" minlength="3" maxlength="15" required aria-describedby="panggilan-hint">
      <br>
      <small id="panggilan-hint">Panjang 3-15 huruf, tanpa gelar.</small>
    </p>
    <p>
      <input type="submit" value="Ajukan kartu">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Setiap kolom diikuti petunjuk format yang selalu terlihat di bawahnya
  - Isian nomor "123" ditolak saat submit; balon bawaan menyertakan teks
    title "Sepuluh digit angka tanpa spasi"
  - Petunjuk tetap tampil setelah balon menghilang, karena petunjuk adalah
    bagian dari halaman, bukan milik browser

Berikut peran setiap bagian kode:

1. Baris 12-15 (kelompok nomor induk): satu kelompok lengkap — label, input ber-pattern dengan title, lalu petunjuk kecil di bawahnya.
2. Baris 13 (aria-describedby): mengaitkan input dengan id petunjuk; pembaca layar menumumkan petunjuk saat kontrol menerima fokus.
3. Baris 18-21 (kelompok nama panggilan): pola yang sama, kali ini dengan batas minlength dan maxlength sebagai aturannya.
4. Baris 24 (input submit): tombol yang memicu pemeriksaan; balon bawaan muncul di atas petunjuk yang tetap terlihat.

Satu pintu menuju pesan yang sepenuhnya milik kita adalah properti validationMessage pada kontrol: skrip dapat membaca teks pesan bawaan tersebut lalu menampilkannya di tempat sendiri. Pembahasannya menunggu section HTML dan JavaScript — untuk kini, markup yang rapi menyiapkan fondasinya.

Kita kini menguasai atribut, mekanisme pemeriksaan, dan pesannya. Satu pertanyaan menutup section ini: hingga mana validasi HTML dapat diandalkan? Chapter berikutnya menjawabnya dengan membedah batasan validasi sisi klien.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Constraint validation
• MDN Web Docs — HTMLInputElement: validationMessage
• MDN Web Docs — Atribut pattern
• web.dev — Learn Forms

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Kartu Anggota</title>
</head>
<body>
  <h1>Pembuatan Kartu Anggota Perpustakaan</h1>
  <form action="/kartu" method="post">
    <p>
      <label for="nomor">Nomor induk</label>
      <input type="text" id="nomor" name="nomor" pattern="[0-9]{10}" title="Sepuluh digit angka tanpa spasi" required aria-describedby="nomor-hint">
      <br>
      <small id="nomor-hint">Tulis 10 digit angka tanpa spasi.</small>
    </p>
    <p>
      <label for="panggilan">Nama panggilan</label>
      <input type="text" id="panggilan" name="panggilan" minlength="3" maxlength="15" required aria-describedby="panggilan-hint">
      <br>
      <small id="panggilan-hint">Panjang 3-15 huruf, tanpa gelar.</small>
    </p>
    <p>
      <input type="submit" value="Ajukan kartu">
    </p>
  </form>
</body>
</html>