Pernah submit form yang tiba-tiba muncul tulisan "email tidak valid" merah pas kamu ngosongin field? Itu validasi. Bisa di-handle pake JavaScript ribet, tapi HTML sebenernya udah punya validasi bawaan yang cukup buat 80% kasus — required, minlength, maxlength, pattern, min, max. Browser otomatis nge-block submit kalau aturan dilanggar, plus kasih pesan error standar dalam bahasa user. Hemat ratusan baris JS.

🤔 TAPI INGAT — client validation = UX, bukan SECURITY. User bisa bypass HTML validation lewat DevTools dalam 5 detik. Server-side validation TETAP WAJIB. HTML validation cuma buat user pengalaman; server validation buat keamanan data. Dua-duanya wajib, gak bisa pilih salah satu.

Atribut Validasi Bawaan HTML

Tambah atribut ini di <input> — browser otomatis block submit kalau dilanggar:

• required — input wajib diisi
• minlength / maxlength — panjang teks minimal/maksimal
• min / max — nilai minimal/maksimal untuk angka
• pattern — validasi menggunakan regex

Contoh Form dengan Validasi

<form>
  <label for="username">Username (3-15 karakter):</label>
  <input type="text" id="username" name="username"
         required minlength="3" maxlength="15">

  <label for="umur">Umur (17-65):</label>
  <input type="number" id="umur" name="umur"
         required min="17" max="65">

  <button type="submit">Daftar</button>
</form>

💡 Bonus: <textarea> buat teks panjang multi-baris (komentar, pesan, alamat). Atribut rows/cols ngatur ukuran default:

<textarea name="pesan" rows="4" cols="50" placeholder="Tulis pesan..."></textarea>

🎭 Analogi sehari-hari

Validasi HTML = satpam di pintu masuk yang cek tiket sebelum izinkan masuk. Cepat, tidak perlu JS, langsung di browser. Tapi inget — satpam dalam ruangan (server) juga harus cek lagi, karena tiket bisa dipalsukan setelah lewat satpam pertama.

⚠️ Jebakan yang sering ditemui

• HTML validation HANYA di client/browser — server WAJIB validasi ulang. User bisa bypass via DevTools / curl.
• pattern="..." pakai regex — escape karakter spesial. Test di regex101.
• novalidate di <form> bypass semua validation HTML — kadang dipakai saat JS handle validation custom.
• <button> tanpa type di dalam <form> default type="submit" — bug klasik: ada <button>Cancel</button> tanpa type="button" malah submit form.
• required di type="email" = harus diisi DAN format email valid — dua-duanya.
• Pesan error default tidak bisa di-style — ganti via setCustomValidity() JS atau pakai library.
• type="number" untuk uang/leading-zero salah — 007 jadi 7. Pakai type="text" + inputmode.

🎯 Validasi di mana — client / server / dua-duanya?

• Cek format dasar (email valid, panjang minimum, angka 0-100) → HTML attribute (required, pattern, min, max) — gratis, instant feedback
• Cek bisnis (email belum terdaftar, kupon masih valid, stok cukup) → server (butuh DB query)
• Cek format kompleks (password butuh huruf+angka+simbol) → JavaScript di client + server cek ulang
• Selalu di server: SEMUA validasi yang di client. Client = UX. Server = security.

Aturan emas: client validation buat user pengalaman cepet, server validation buat keamanan. JANGAN PERNAH pilih salah satu — keduanya WAJIB.

TL;DR: HTML validation = required/minlength/maxlength/pattern/min/max — gratis, instant feedback, browser block submit. Cukup buat 80% kasus tanpa JS. TAPI WAJIB ingat: client validation = UX, BUKAN security. User bypass DevTools dalam 5 detik. Server-side validation TETAP WAJIB. <button> tanpa type di form default type="submit" (bug klasik). novalidate bypass semua validation HTML.