Memahami Atribut Validasi Bawaan HTML5

Memahami Atribut Validasi Bawaan HTML5

Sebagai pengembang backend, Anda tentu tahu bahwa "Data kotor adalah musuh utama." Validasi di sisi server (Laravel) memang wajib, namun validasi di sisi klien (HTML) adalah baris pertahanan pertama yang memberikan umpan balik instan kepada pengguna tanpa perlu membebani server.

Berikut adalah 5 atribut validasi bawaan yang paling sering digunakan:

1. required (Wajib Diisi)

Atribut ini memastikan pengguna tidak bisa mengirimkan formulir jika kotak input masih kosong.

• Keguna an: Nama pengguna, email, dan password saat pendaftaran.

2. min & max (Batas Angka/Tanggal)

Digunakan khusus untuk tipe input number, range, dan date.

• Kegunaan: Membatasi usia (misal: min="17") atau jumlah stok barang agar tidak bernilai negatif.

3. maxlength (Batas Karakter)

Menentukan jumlah karakter maksimal yang boleh diketik oleh pengguna. Berbeda dengan required, browser akan berhenti menerima ketikan jika batas sudah tercapai.

• Kegunaan: Nomor NIK (16 karakter) atau ringkasan berita pendek.

4. pattern (Format RegEx Kustom)

Atribut paling kuat yang menggunakan Regular Expression (RegEx) untuk mencocokkan format teks yang sangat spesifik.

• Kegunaan: Validasi format plat nomor kendaraan, kode pos, atau kerumitan password.

Tutorial: Implementasi Validasi pada Form Input D ata

Mari kita terapkan atribut-atribut ini ke dalam sebuah kasus nyata: Formulir Pendaftaran Penduduk Baru.

<form action="/proses-data" method="POST"> <label>Nama Lengkap:label><br> <input type="text" name="nama" required> <br><br> <label>Usia:label><br> <input type="number" name="usia" min="0" max="120" required> <br><br> <label>NIK (16 Digit):label><br> <input type="text" name="nik" maxlength="16" placeholder="Masukkan 16 digit NIK" required> <br><br> <label>Nomor HP:label><br> <input type="tel" name="phone" pattern="^08[0-9]{8,11}$" title="Gunakan format Indonesia (08...) dengan total 10-13 digit" required> <br><br> <button type="submit">Daftarkan Databutton>
form>

Tabel Ringkasan Validasi

Kesimpulan

Dengan mengimplementasikan atribut-atribut ini, Anda tidak hanya mempermudah pekerjaan validasi di Laravel, tetapi juga membantu pengguna memperbaiki kesalahan mereka secara real-time. Data yang sampai ke server Anda akan jauh lebih "bersih" dan terstandarisasi.