validasipatternregexMahir3 mnt baca

Validasi: pattern dengan Regex

Atribut pattern dan regex sederhana untuk format khusus: kode pos, username, plus title sebagai pesan error.

Kenapa type="text" Tidak Cukup

type="email" tahu format email dan type="number" tahu angka, tapi type="text" menerima apa saja. Padahal banyak field punya format baku: kode pos selalu 5 digit, username tidak boleh pakai spasi, kode member selalu berpola huruf-strip-angka. Di sinilah atribut pattern bekerja: ia menempelkan ekspresi reguler (regex) sebagai penjaga format.

Regex Secukupnya Saja

Kamu tidak perlu jadi master regex. Tiga pola ini menutupi 90% kebutuhan form:

[0-9]: satu digit angka. [0-9]{5} artinya tepat 5 digit.
[A-Za-z]: satu huruf. [A-Z]{3} artinya tepat 3 huruf kapital.
{min,max}: rentang jumlah. {4,16} artinya 4 sampai 16 karakter.

Contoh paling sederhana, kode pos Indonesia:

html

<label for="pos">Kode pos:</label>
<input type="text" id="pos" name="pos" pattern="[0-9]{5}" required />

"12345" lolos, "1234" ditolak, "12a45" ditolak. Browser mencocokkan seluruh nilai terhadap pola, jadi kamu tidak perlu menulis ^...$ seperti di JavaScript.

Contoh Realistis: Username

Aturan username khas: huruf, angka, dan underscore, panjang 4 sampai 16 karakter:

html

<label for="user">Username:</label>
<input type="text" id="user" name="user"
  pattern="[A-Za-z0-9_]{4,16}"
  title="4-16 karakter: huruf, angka, atau underscore"
  required />

Dan contoh yang sedikit lebih kompleks, kode member berpola "MBR-4821":

html

<label for="member">Kode member:</label>
<input type="text" id="member" name="member"
  pattern="[A-Z]{3}-[0-9]{4}"
  title="Format: 3 huruf kapital, strip, 4 digit (contoh: MBR-4821)"
  required />

Perhatikan title: tanpa atribut ini, browser hanya menampilkan pesan generik "Harap sesuaikan dengan format yang diminta" yang tidak membantu siapa pun. title adalah pesan error versi manusiawinya. Selalu tulis contoh format yang valid di dalamnya.

Tiga Fakta Penting tentang pattern

pattern tidak memaksa field diisi. Nilai kosong selalu lolos pattern. Kalau field wajib diisi, pasangkan dengan required.
pattern hanya berlaku untuk input teks (text, search, tel, url, password). Di type="number" ia diabaikan, pakai min/max sebagai gantinya.
Regex di HTML tidak mendukung flag seperti case-insensitive. Butuh huruf besar dan kecil? Tulis keduanya: [A-Za-z].

Salah vs Benar

html

<!-- SALAH: tanpa title, pengguna tidak tahu format yang benar -->
<label for="p1">Kode pos:</label>
<input type="text" id="p1" name="pos" pattern="[0-9]{5}" />

<!-- BENAR: title menjelaskan format yang diharapkan -->
<label for="p2">Kode pos:</label>
<input type="text" id="p2" name="pos" pattern="[0-9]{5}"
  title="Kode pos harus 5 digit angka, contoh: 40115" required />

html

<!-- SALAH: pola terlalu ketat, menolak nama pengguna yang valid -->
<!-- (banyak username memakai huruf kecil) -->
<input type="text" name="user" pattern="[A-Z0-9_]{4,16}"
  title="Username huruf kapital saja" />

<!-- BENAR: izinkan huruf besar dan kecil -->
<input type="text" name="user" pattern="[A-Za-z0-9_]{4,16}"
  title="4-16 karakter: huruf, angka, atau underscore" />

Catatan teknis: Seperti semua validasi browser, pattern mudah dilewati lewat DevTools. Regex yang sama wajib dijalankan ulang di server. Anggap pattern sebagai resepsionis yang ramah: ia menyaring tamu di depan, tapi brankas tetap dikunci dari dalam.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Validator Kode Member

Buat form aktivasi member: kode member required berpola 3 huruf kapital + strip + 4 digit (contoh MBR-4821) dengan title yang memuat contoh valid, plus PIN required berpola tepat 6 digit. Regex yang tepat di sisi klien menghemat ratusan request gagal ke server setiap harinya.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Aktivasi</title>
</head>
<body>
  <form>
    <!-- pola di sini -->
  </form>
</body>
</html>

Open Sandbox