Pola Validasi Kustom untuk Kolom Teks

A bidang teks Menerima apa pun yang diketik pengguna—tetapi terkadang Anda memerlukan format khusus. URL situs web, kode produk, nomor lisensi, atau nama yang hanya terdiri dari huruf semuanya memiliki pola yang membuatnya valid. Pola validasi khusus memungkinkan Anda menentukan dengan tepat format apa yang dapat diterima, dan mendeteksi kesalahan sebelum pengiriman.

Dalam panduan ini, Anda akan mempelajari cara menambahkan pola validasi khusus ke kolom teks pada formulir WordPress Anda.

Apa Itu Pola Validasi?

Konsep

Pola validasi adalah aturan yang mendefinisikan input mana yang valid:

• “Harus hanya berisi huruf”
• “Harus berupa URL yang valid”
• “Harus sesuai dengan format ABC-1234”
• “Harus terdiri dari tepat 10 karakter”

Bagaimana Mereka Bekerja

1. Pengguna mengetik di kolom teks
2. Saat dikirim (atau saat mereka mengetik), input diperiksa terhadap pola.
3. Jika cocok: Validasi berhasil
4. Jika tidak: Pesan kesalahan akan ditampilkan

Keunggulan

• Kualitas data: Pastikan formatnya konsisten.
• Pencegahan kesalahan: Deteksi kesalahan sejak dini
• Panduan pengguna: Harapan yang jelas
• Kompatibilitas hilir: Data bekerja dengan sistem lain

Pola Validasi Bawaan

Pembuat Formulir Otomatis mencakup pola umum:

Menggunakan Pola Bawaan

Langkah 1: Tambahkan Kolom Teks

1. Buka formulir Anda di A.F.B.
2. sayang Teks bidang untuk membentuk
3. Klik untuk mengkonfigurasi

Langkah 2: Pilih Pola Validasi

1. Menemukan Pola Validasi dalam pengaturan
2. Pilih dari menu tarik-turun:
   • Tidak ada (tidak ada pola)
   • Email
   • URL
   • Hanya Surat
   • Hanya Angka
   • Alfanumerik
   • Kustom
3. Simpan Pengaturan

Langkah 3: Validasi Pengujian

1. Formulir pratinjau
2. Coba masukkan input yang valid—seharusnya berhasil.
3. Coba masukkan input yang tidak valid—seharusnya akan menampilkan kesalahan.

Contoh Pola dan Kasus Penggunaan

Validasi URL

Digunakan untuk:

• Bidang situs web
• Tautan portofolio
• Profil media sosial
• URL Referensi

Contoh yang valid:

• https://example.com
• http://www.example.com/page
• https://example.com/path?query=value

Contoh yang tidak valid:

• example.com (protokol hilang)
• www.example.com (protokol hilang)
• hanya beberapa teks

Hanya Surat

Digunakan untuk:

• Nama depan/belakang (validasi sederhana)
• Nama kota
• Kode negara
• Pengidentifikasi alfabetis

Contoh yang valid:

• John
• Smith
• NewYork

Contoh yang tidak valid:

• John123
• New York (ruang angkasa)
• O'Brien (tanda apostrof)

Catatan: Hanya huruf saja adalah aturan baku. Pertimbangkan apakah Anda memerlukan spasi, tanda hubung, atau aksen.

Hanya Angka

Digunakan untuk:

• Nomor ID
• Nomor akun
• Kuantitas (jika tidak menggunakan kolom angka)
• Kode PIN

Contoh yang valid:

• 12345
• 00123
• 9876543210

Contoh yang tidak valid:

• 123-456 (tanda hubung)
• 123.45 (desimal)
• 12345A

Alfanumerik

Digunakan untuk:

• Kode produk
• Nomor referensi
• Nama pengguna
• Nomor serial

Contoh yang valid:

• ABC123
• User42
• PROD001

Contoh yang tidak valid:

• ABC-123 (tanda hubung)
• ABC 123 (spasi)
• ABC_123 (garis bawah)

Pola Validasi Kustom (Regex)

Apa itu Regex?

Ekspresi reguler (regex) adalah pola yang mendeskripsikan format teks:

• ^ = Awal string
• $ = Akhir string
• [A-Z] = Huruf kapital apa pun
• [a-z] = Huruf kecil apa pun
• [0-9] = Angka apa pun
• {3} = Tepat 3 dari sebelumnya
• {2,5} = Antara 2 dan 5 dari sebelumnya
• + = Satu atau lebih
• * = Nol atau lebih
• ? = Opsional (nol atau satu)

Membuat Pola Kustom

1. Pilih “Kustom” dari menu tarik-turun validasi.
2. Masukkan pola regex Anda
3. Pengujian dengan berbagai masukan

Contoh Pola Kustom Umum

Kode Pos AS

Pola: ^\d{5}(-\d{4})?$

Memvalidasi:

• 12345 (5 digit)
• 12345-6789 (ZIP+4)

Penolakan:

• 1234 (terlalu pendek)
• 123456 (terlalu panjang)
• ABCDE (huruf)

Nomor Telepon AS

Pola: ^\d{3}-\d{3}-\d{4}$

Memvalidasi: 555-123-4567

Untuk format yang fleksibel: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Memvalidasi:

• 555-123-4567
• (555) 123-4567
• 555.123.4567
• 555 123 4567

Kode Produk (format ABC-1234)

Pola: ^[A-Z]{3}-\d{4}$

Memvalidasi:

• ABC-1234
• XYZ-9999
• PRO-0001

Penolakan:

• abc-1234 (huruf kecil)
• AB-1234 (hanya 2 huruf)
• ABC1234 (tanda hubung hilang)

Plat Nomor (Berbagai Format)

Pola (umum AS): ^[A-Z0-9]{1,7}$

Memvalidasi: 1-7 huruf/angka kapital

Kartu Kredit (Format Dasar)

Pola: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$

Memvalidasi:

• 1234567890123456
• 1234 5678 9012 3456
• +1234 5678 9012

Catatan: Untuk pembayaran aktual, gunakan penyedia layanan pembayaran yang tepat dengan validasi yang mereka miliki.

Nama Pengguna (Huruf, Angka, Garis Bawah)

Pola: ^[a-zA-Z][a-zA-Z0-9_]{2,19}$

Aturan:

• Dimulai dengan huruf
• Total 3-20 karakter
• Hanya huruf, angka, dan garis bawah.

Memvalidasi: pengguna_123, JohnDoe, tes42

Kode Warna Heksadesimal

Pola: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

Memvalidasi:

• # FF5733
• # fff
• #ABC123

Tanggal (TTTT-BB-HH)

Pola: ^\d{4}-\d{2}-\d{2}$

Memvalidasi: 2026-01-15

Catatan: Untuk tanggal, menggunakan kolom Tanggal dengan pemilih tanggal biasanya lebih baik.

Waktu (HH:MM 24 jam)

Pola: ^([01]\d|2[0-3]):[0-5]\d$

Memvalidasi:

• 09:30
• 14:45
• 23:59

Nomor Faktur (INV-YYYY-NNNN)

Pola: ^INV-\d{4}-\d{4}$

Memvalidasi:

• INV-2026-0001
• INV-2025-1234

Nomor Jaminan Sosial (AS)

Pola: ^\d{3}-\d{2}-\d{4}$

Memvalidasi: 123-45-6789

Peringatan: Berhati-hatilah saat mengumpulkan nomor Jaminan Sosial (SSN)—ada implikasi terhadap keamanan dan privasi.

Membuat Pola Anda Sendiri

Proses Langkah-demi-Langkah

1. Tentukan persyaratan: Format apa yang Anda butuhkan?
2. Memecahnya: Karakter apa saja, berapa banyak, dan dalam urutan apa?
3. Membangun pola: Terjemahkan ke regex
4. Uji secara menyeluruh: Masukan yang valid DAN tidak valid
5. Tulis pesan kesalahan: Bantu pengguna memahami formatnya.

Contoh: ID Karyawan

Persyaratan: 2 huruf + 4 angka + 1 huruf (contoh: AB1234C)

Kerusakan:

• 2 huruf kapital: [A-Z]{2}
• 4 digit: \d{4}
• 1 huruf kapital: [A-Z]
• Tidak ada yang sebelum atau sesudah: ^ dan $

Pola akhir: ^[A-Z]{2}\d{4}[A-Z]$

Pola Pengujian

Sebelum digunakan dalam formulir:

• Uji input yang valid (seharusnya lulus)
• Uji input tidak valid (seharusnya gagal)
• Uji kasus ekstrem (batas, karakter khusus)
• Gunakan penguji regex online untuk melakukan debugging.

Pesan Kesalahan untuk Validasi

Pesan Default

• “Silakan masukkan nilai yang valid”
• “Kolom ini tidak valid”

Pesan Kustom yang Lebih Baik

Beri tahu pengguna format yang diharapkan:

Menggunakan Teks Placeholder dan Teks Bantuan

Cegah kesalahan dengan menampilkan format di awal:

• Tempat penampung: “ABC-1234”
• Teks bantuan: “Masukkan kode produk Anda (misalnya, ABC-1234)”

Praktik Terbaik

1. Mulai Sederhana

Gunakan pola bawaan jika memungkinkan. Regex kustom akan menambah kompleksitas.

2. Jangan Terlalu Memvalidasi

Pola yang terlalu kaku membuat pengguna frustrasi:

• Nama dengan tanda hubung (Mary-Jane)
• Nama dengan tanda apostrof (O'Brien)
• Tokoh internasional (José, Müller)

3. Tampilkan Format yang Diharapkan

Selalu beritahu pengguna apa yang Anda harapkan:

• Placeholder dengan contoh
• Teks bantuan yang menjelaskan format
• Hapus pesan kesalahan

4. Uji Kasus Ekstrem

• Input kosong
• Spasi di awal/akhir
• Karakter spesial
• Panjang maksimum

5. Pertimbangkan Alternatif

Terkadang pendekatan lain lebih baik:

• Tanggal → Gunakan kolom Tanggal
• Angka → Gunakan kolom Angka
• Telepon → Gunakan kolom Telepon dengan format
• Opsi tetap → Gunakan menu tarik-turun

Menggabungkan dengan Validasi Lainnya

Pola + Diperlukan

• Kolom harus diisi DAN sesuai dengan pola.
• Gagal kosong “diperlukan”
• Format yang salah menyebabkan pola gagal.

Pola + Panjang Minimum/Maksimum

• Pola memvalidasi format
• Panjang memvalidasi ukuran
• Keduanya harus lulus

Pola Pemecahan Masalah

Pola Tidak Berfungsi

Memeriksa:

• Sintaksisnya benar (tidak ada kesalahan ketik)
• Karakter khusus berhasil lolos dari pengawasan.
• ^ dan $ jangkar jika diperlukan

Input yang Valid Sedang Ditolak

Memeriksa:

• Pola tersebut mungkin terlalu ketat.
• Karakter yang valid hilang dalam pola.
• Masalah sensitivitas huruf besar/kecil

Input Tidak Valid Diterima

Memeriksa:

• Pola mungkin terlalu longgar
• Jangkar (^ dan $) hilang
• Uji dengan lebih banyak contoh

Pertanyaan yang Sering Diajukan

Bisakah saya menggabungkan beberapa pola?

Satu field menggunakan satu pola. Untuk validasi yang kompleks, gabungkan persyaratan dalam satu regex menggunakan alternatif (|) atau buat pola untuk mencocokkan semua persyaratan.

Apakah pola-pola tersebut peka terhadap huruf besar dan kecil?

Secara default, ya. Gunakan [A-Za-z] untuk mencocokkan kedua huruf besar/kecil, atau tambahkan flag case-insensitive jika didukung.

Bagaimana cara saya menambahkan spasi?

Tambahkan \s ke kelas karakter Anda: [A-Za-z\s] cocok dengan huruf dan spasi.

Bagaimana dengan karakter internasional?

Standar [A-Za-z] tidak termasuk karakter beraksen. Untuk nama internasional, pertimbangkan validasi yang lebih longgar atau gunakan \p{L} (jika didukung) untuk setiap huruf.

Apakah saya harus memvalidasi saat blur atau saat mengirimkan?

Keduanya berfungsi. Saat fokus hilang (on blur), memberikan umpan balik lebih cepat. Saat pengiriman (on submit) menangkap semuanya. Banyak formulir melakukan keduanya.

Ringkasan

Menambahkan pola validasi khusus:

1. Pilih jenis pola – Terpasang atau kustom
2. Konfigurasi pola – Pilih atau masukkan regex
3. Tambahkan tempat penampung – Tampilkan format yang diharapkan
4. Tambahkan teks bantuan – Jelaskan persyaratannya
5. Atur pesan kesalahan – Koreksi panduan
6. Tes secara menyeluruh – Masukan yang valid dan tidak valid

Kesimpulan

Pola validasi khusus memastikan kualitas data dengan memberlakukan format tertentu. Baik Anda memerlukan validasi URL, kode produk, atau pengidentifikasi khusus, pola tersebut mendeteksi kesalahan sebelum pengiriman dan memandu pengguna untuk memasukkan data dengan benar.

Pembuat Formulir Otomatis Mencakup pola umum (Email, URL, Huruf, Angka, Alfanumerik) dan mendukung regex khusus untuk kebutuhan validasi khusus. Data yang bersih dimulai dengan validasi yang tepat.

Siap memvalidasi input formulir Anda? Unduh Pembuat Formulir Otomatis dan pastikan formulir Anda mengumpulkan data yang diformat dengan benar.