Pola Validasi

Kode pos Indonesia selalu lima digit, nomor telepon selalu berawalan 08, dan nama pengguna lazimnya tanpa spasi. Jenis input seperti email dan url memang memeriksa format, tetapi format khas milik aplikasi kita tidak selalu tersedia di antara jenis bawaan. Atribut pattern mengisi ruang itu: kita mendeskripsikan bentuk nilai yang sah dengan ekspresi reguler (regex), dan browser menolak isian yang tidak cocok saat submit.

Atribut pattern #

pattern berlaku pada input text, search, url, tel, email, dan password. Nilainya berupa pola regex, dan browser mencocokkan pola tersebut terhadap seluruh nilai, bukan sebagiannya, sehingga tanda awal dan akhir pola tidak perlu dituliskan. Seperti minlength, pemeriksaan hanya berjalan ketika kolom terisi — kolom kosong tetap lolos kecuali kolom itu juga membawa required.

Karakter Pola yang Sering Dipakai #

Regex adalah bahasa pola yang luas. Untuk kebutuhan validasi form, kita cukup memegang segelintir notasi berikut:

Menggabungkan notasi-notasi tersebut telah cukup untuk banyak kebutuhan: [0-9]{5} menyusun pola kode pos, sedangkan [A-Za-z0-9_]{4,20} menyusun nama pengguna 4-20 karakter tanpa spasi. Sintaksnya sama dengan regex JavaScript, yang kita sentuh lebih dalam pada section HTML dan JavaScript.

Title sebagai Penjelas Pola #

Balon pesan bawaan untuk pattern hanya menyatakan bahwa nilai tidak cocok, tanpa memberi tahu bentuk yang diharapkan. Atribut title melengkapi celah tersebut: browser memakai isi title saat menyusun pesan kesalahan, sebagian browser menampilkannya sebagai tooltip ketika kursor berhenti di atas kolom, dan pembaca layar menumumkannya ketika kontrol menerima fokus. Pasangkan title pada setiap kolom ber-pattern, dan tulis aturannya dalam kalimat manusia, misalnya “Lima digit angka”.

Contoh: Alamat Pengiriman Toko Siti #

Toko Siti menerima pesanan antar kota dan meminta tiga data berformat ketat: kode pos, nomor telepon, dan nama pengguna akun. Simpan file berikut sebagai contoh-pola-validasi.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alamat Pengiriman</title>
</head>
<body>
  <h1>Alamat Pengiriman</h1>
  <form action="/checkout" method="post">
    <p>
      <label for="pos">Kode pos</label>
      <input type="text" id="pos" name="pos" pattern="[0-9]{5}" title="Lima digit angka, cth: 10110" required>
    </p>
    <p>
      <label for="telepon">Nomor telepon</label>
      <input type="tel" id="telepon" name="telepon" pattern="08[0-9]{8,10}" title="Diawali 08, total 10-12 digit" required>
    </p>
    <p>
      <label for="username">Nama pengguna</label>
      <input type="text" id="username" name="username" pattern="[A-Za-z0-9_]{4,20}" title="4-20 karakter huruf, angka, atau garis bawah" required>
    </p>
    <p>
      <input type="submit" value="Lanjutkan">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Tiga kolom wajib; tooltip dengan teks title muncul saat kursor
    berhenti di atas kolom
  - Kode pos "101" ditolak saat submit; pesan bawaan menyertakan teks title
  - Telepon "0812345678" (10 digit) dan "081234567890" (12 digit) lolos
  - Username "budi 99" ditolak karena mengandung spasi

Berikut peran setiap bagian kode:

1. Baris 13 (input kode pos): pola [0-9]{5} menuntut tepat lima digit; title menjelaskan aturan pada pesan kesalahan dan tooltip.
2. Baris 17 (input tel): pola 08[0-9]{8,10} menuntut awalan 08 lalu 8-10 digit, sehingga panjang totalnya 10-12 digit.
3. Baris 21 (input username): pola [A-Za-z0-9_]{4,20} menerima huruf, angka, dan garis bawah sepanjang 4-20 karakter; spasi otomatis ditolak.
4. Baris 24 (input submit): tombol yang memicu pencocokan pola pada ketiga kolom.

Seluruh atribut validasi kini terkumpul: wajib isi, panjang, rentang, dan pola. Chapter berikutnya menarik benang merahnya — bagaimana browser menjalankan semua pemeriksaan tersebut dalam satu mekanisme bernama constraint validation.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Atribut pattern
• MDN Web Docs — Atribut global title
• MDN Web Docs — Input tel
• WHATWG — HTML Living Standard: Constraint validation

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alamat Pengiriman</title>
</head>
<body>
  <h1>Alamat Pengiriman</h1>
  <form action="/checkout" method="post">
    <p>
      <label for="pos">Kode pos</label>
      <input type="text" id="pos" name="pos" pattern="[0-9]{5}" title="Lima digit angka, cth: 10110" required>
    </p>
    <p>
      <label for="telepon">Nomor telepon</label>
      <input type="tel" id="telepon" name="telepon" pattern="08[0-9]{8,10}" title="Diawali 08, total 10-12 digit" required>
    </p>
    <p>
      <label for="username">Nama pengguna</label>
      <input type="text" id="username" name="username" pattern="[A-Za-z0-9_]{4,20}" title="4-20 karakter huruf, angka, atau garis bawah" required>
    </p>
    <p>
      <input type="submit" value="Lanjutkan">
    </p>
  </form>
</body>
</html>