Validasi Form Bawaan Browser

Kenapa Validasi Penting?

Formulir tanpa validasi itu seperti pintu tanpa kunci: siapa pun bisa mengirim data kosong, email tanpa @, atau umur berisi "abc". Tanpa pemeriksaan, data sampah masuk ke server dan merusak segalanya, dari statistik sampai pengiriman barang. Secara tradisional validasi ditulis dengan JavaScript yang panjang, tetapi browser modern sudah menyediakan validasi bawaan yang cukup untuk banyak kasus, tanpa satu baris JavaScript pun.

Contoh Sederhana: required dan Tipe Input

<form>
  <p><label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" required /></p>
  <p><label for="email">Email:</label>
    <input type="email" id="email" name="email" required /></p>
  <p><button type="submit">Kirim</button></p>
</form>

Atribut required membuat field wajib diisi. Kombinasikan dengan tipe input yang tepat: type="email" otomatis menolak teks tanpa @, type="number" menolak huruf. Coba submit dalam keadaan kosong dan browser akan menolak sambil menampilkan pesan error bawaan. Gratis, tanpa kode.

Selain itu, tipe input yang tepat memberi bonus di perangkat mobile: type="email" memunculkan keyboard dengan tombol @, type="number" memunculkan keyboard angka. Detail kecil yang membuat form terasa profesional.

Contoh Realistis: Batasan Angka dan Pola Khusus

<form>
  <p><label for="umur">Umur (13-99):</label>
    <input type="number" id="umur" name="umur"
      min="13" max="99" required /></p>
  <p><label for="pos">Kode pos (5 digit):</label>
    <input type="text" id="pos" name="pos"
      pattern="[0-9]{5}" required
      title="Kode pos harus tepat 5 digit angka" /></p>
  <p><label for="user">Username:</label>
    <input type="text" id="user" name="user"
      pattern="[A-Za-z0-9_]{4,16}" required
      title="4-16 karakter: huruf, angka, atau underscore" /></p>
  <p><button type="submit">Daftar</button></p>
</form>

min dan max membatasi rentang angka yang boleh dimasukkan. pattern menerima ekspresi reguler untuk format khusus seperti kode pos. Perhatikan atribut title: isinya menjadi pesan error yang tampil ke pengguna. Tanpa title, pesan error-nya generik dan membingungkan karena pengguna tidak tahu format yang benar seperti apa.

Menonaktifkan Validasi Saat Dibutuhkan

Ada kalanya validasi justru harus dimatikan. Tombol "Simpan Draft" misalnya, harus bisa menyimpan form yang belum lengkap:

<form>
  <p><label for="judul">Judul artikel:</label>
    <input type="text" id="judul" name="judul" required /></p>
  <p>
    <button type="submit">Terbitkan</button>
    <button type="submit" formnovalidate>Simpan Draft</button>
  </p>
</form>

formnovalidate pada tombol berarti "tombol ini boleh submit tanpa validasi". Versi level form-nya, novalidate pada <form>, mematikan semua validasi bawaan sekaligus. Ini biasanya dipakai saat validasi digantikan sepenuhnya oleh JavaScript custom yang lebih kompleks.

Kesalahan Umum

Kesalahan terbesar: menganggap validasi browser sudah cukup lalu tidak memvalidasi di server. Atribut HTML bisa dihapus siapa pun lewat DevTools dalam lima detik. Validasi browser hanyalah lapisan kenyamanan agar pengguna cepat tahu kesalahannya. Server wajib memvalidasi ulang semuanya, tanpa pengecualian.

Kesalahan kedua: memakai pattern tanpa title. Pengguna yang salah format hanya melihat pesan samar dan tidak tahu format yang benar seperti apa. Selalu tulis title yang menjelaskan format yang diminta dengan bahasa manusia, bukan bahasa regex.

Catatan teknis: Pesan error bawaan browser tampil dalam bahasa browser pengguna, bukan bahasa halamanmu. Kalau butuh pesan error berbahasa Indonesia yang konsisten di semua browser, kamu harus menggantinya dengan JavaScript lewat Constraint Validation API (akan dibahas di seri JS).