Validasi Formulir Bawaan Browser

Validasi Tanpa JavaScript

Kabar baik: browser modern bisa memvalidasi form secara otomatis, tanpa satu baris pun JavaScript. Cukup tambahkan atribut yang tepat, dan browser akan menolak submit plus menampilkan pesan error sendiri.

required: Wajib Diisi

Atribut required bikin field wajib diisi. Kalau kosong saat submit, browser memblokir dan menampilkan peringatan:

<label for="nama">Nama (wajib)</label>
<input type="text" id="nama" name="nama" required>

Berlaku juga untuk select, radio (cukup satu radio dalam grup yang required), checkbox, dan textarea.

Validasi Panjang Teks

• minlength: minimal jumlah karakter.
• maxlength: maksimal jumlah karakter.

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

Validasi Angka

Untuk type="number":

• min dan max: rentang nilai.
• step: kelipatan yang diizinkan.

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

<label for="harga">Harga (kelipatan 500)</label>
<input type="number" id="harga" name="harga" step="500">

Type Khusus: Email dan URL

type="email" mengecek format email (ada @ dan domain), type="url" mengecek format URL:

<label for="email">Email</label>
<input type="email" id="email" name="email" required>

<label for="web">Website</label>
<input type="url" id="web" name="web" placeholder="https://contoh.com">

Di HP, type="email" juga memunculkan keyboard dengan tombol @. Detail kecil yang bikin form terasa profesional.

pattern: Validasi dengan Regex

Atribut pattern menerima regular expression untuk aturan kustom. Contoh: kode pos 5 digit angka:

<label for="kodepos">Kode Pos (5 digit)</label>
<input type="text" id="kodepos" name="kodepos"
       pattern="[0-9]{5}"
       title="Kode pos harus 5 digit angka" required>

Atribut title dipakai browser sebagai bagian pesan error, jadi tulis penjelasan yang membantu, bukan sekadar mengulang aturan.

Catatan teknis: Validasi browser itu validasi tampilan, bukan keamanan. Orang bisa mematikan JavaScript atau mengedit HTML lewat devtools lalu mengirim data ngawur. Backend wajib memvalidasi ulang. Aturan mainnya: validasi di browser untuk UX yang enak, validasi di server untuk keamanan.

Menonaktifkan Validasi

Kadang kamu butuh tombol "simpan draf" yang boleh submit walau form belum lengkap. Tambahkan formnovalidate pada tombolnya:

<button type="submit">Kirim</button>
<button type="submit" formnovalidate>Simpan Draf</button>

Contoh Lengkap

<form>
  <label for="nama">Nama Lengkap</label>
  <input type="text" id="nama" name="nama" minlength="3" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="umur">Umur</label>
  <input type="number" id="umur" name="umur" min="17" max="99" required>

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

Coba kosongkan lalu submit: browser mencegah dan menunjukkan field mana yang bermasalah. Semua itu gratis, tanpa JavaScript.