validasirequiredformMahir3 mnt baca

Validasi: required

Atribut required secara mendalam: perilaku browser, kapan field boleh opsional, dan jebakan umumnya.

Masalah: Form Kosong yang Lolos

Bayangkan form pendaftaran tanpa validasi: pengguna menekan "Kirim" dengan semua field kosong, server menerima baris kosong di database, dan admin kebingungan membersihkannya. Kamu bisa mencegahnya dengan JavaScript, tapi ada cara yang lebih murah: atribut required.

required: Satu Kata, Efek Besar

Tambahkan required ke input yang wajib diisi:

html

<form>
  <label for="nama">Nama lengkap:</label>
  <input type="text" id="nama" name="nama" required />

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

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

Saat pengguna submit dengan field kosong, browser membatalkan pengiriman, menampilkan pesan error bawaan ("Harap isi kolom ini"), dan memindahkan fokus ke field yang bermasalah. Tanpa satu baris JavaScript pun.

Perilaku Browser yang Perlu Kamu Tahu

Validasi berjalan saat submit, bukan saat mengetik. Pengguna bebas mengisi setengah jalan tanpa diganggu popup.
Hanya field yang terlihat dan aktif yang divalidasi. Input disabled atau type="hidden" dilewati begitu saja.
Pesan error memakai bahasa browser pengguna, bukan bahasa halamanmu. Di Chrome berbahasa Indonesia, pesannya ikut berbahasa Indonesia.
Browser memeriksa berurutan dan berhenti di field pertama yang gagal, lalu fokus otomatis ke sana.

Kapan Field Boleh Opsional

Kesalahan paling umum: menandai semua field sebagai required. Field opsional yang dipaksa wajib membuat pengguna berbohong (mengisi "asdf") atau kabur meninggalkan form. Aturan praktisnya: required hanya untuk data yang benar-benar dibutuhkan agar permintaan bisa diproses.

html

<form>
  <label for="nama2">Nama lengkap: *</label>
  <input type="text" id="nama2" name="nama" required />

  <label for="telp">No. telepon (opsional):</label>
  <input type="tel" id="telp" name="telp" />

  <label for="alamat2">Alamat baris 2 (opsional):</label>
  <input type="text" id="alamat2" name="alamat2" />

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

Nomor telepon dan alamat baris kedua tetap berguna, tapi pesanan tetap bisa diproses tanpanya. Itu definisi opsional yang jujur: tandai jelas, jangan dipaksa.

required di Luar Input Teks

Atribut required juga bekerja pada select, checkbox, dan grup radio:

html

<!-- select: opsi pertama HARUS bervalue kosong agar required bekerja -->
<label for="kota">Kota:</label>
<select id="kota" name="kota" required>
  <option value="">-- Pilih kota --</option>
  <option value="bdg">Bandung</option>
  <option value="jkt">Jakarta</option>
</select>

<!-- checkbox: wajib dicentang, mis. persetujuan syarat -->
<label>
  <input type="checkbox" name="setuju" required />
  Saya menyetujui syarat dan ketentuan
</label>

Jebakan klasik pada select: kalau opsi pertama langsung "Bandung" (punya value), browser menganggap field sudah terisi dan required tidak pernah gagal. Opsi pertama wajib bervalue kosong.

Salah vs Benar

html

<!-- SALAH: required tapi tanpa label. Pengguna screen reader -->
<!-- tidak tahu ini field apa -->
<input type="text" name="nama" required />

<!-- BENAR: label menjelaskan, required menegakkan -->
<label for="nama3">Nama lengkap:</label>
<input type="text" id="nama3" name="nama" required />

html

<!-- SALAH: memaksa field yang seharusnya opsional -->
<label for="ig">Instagram (wajib):</label>
<input type="text" id="ig" name="ig" required />

<!-- BENAR: jujur menandai mana yang opsional -->
<label for="ig2">Instagram (opsional):</label>
<input type="text" id="ig2" name="ig" />

Catatan teknis: required hanyalah lapisan UX. Pengguna bisa menghapus atributnya lewat DevTools atau mengirim request langsung ke server. Server wajib memeriksa ulang semua field wajib di sisinya. Validasi browser mempercepat feedback, bukan menggantikan keamanan.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Formulir Jujur: Wajib vs Opsional

Buat formulir saran: nama required, email required, pesan required, nomor WhatsApp opsional, dan select topik required dengan opsi pertama bervalue kosong. Kemampuan membedakan field wajib dan opsional menentukan apakah form-mu diisi jujur atau ditinggal kabur.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Saran</title>
</head>
<body>
  <form>
    <!-- susun di sini -->
  </form>
</body>
</html>

Open Sandbox