Pendaftar workshop paling sering tersandung bukan pada pertanyaan sulit, melainkan pada kolom yang dibiarkan kosong. Nama tidak diisi, kotak persetujuan tidak dicentang, tanggal sesi dilewatkan — data pun berangkat setengah jadi ke server. Aturan pertama dalam dunia validasi form sekaligus aturan paling sederhana: kolom ini wajib berisi sebelum form boleh dikirim.

HTML menyediakan satu atribut boolean untuk itu: required. Tanpa nilai, tanpa JavaScript — cukup ditempelkan pada kontrol yang tidak boleh kosong.

Blokir Sebelum Terkirim #

Aturannya: kontrol dengan atribut required wajib berisi nilai sebelum form boleh dikirim. Mekanismenya: saat tombol submit ditekan, browser memeriksa setiap kontrol bertanda required. Bila ada yang kosong, browser membatalkan pengiriman, memunculkan pesan bawaan di dekat kolom (misalnya “Isi kolom ini”), dan mengalihkan fokus keyboard ke kolom galat pertama. Seluruh proses berjalan di sisi klien — server tidak pernah menerima percobaan pengiriman yang gagal.

Cakupannya luas: input bertipe text, email, url, number, date, checkbox, dan radio, juga select, file, dan textarea. Untuk grup radio berlaku aturan khas: cukup satu input dalam grup yang membawa required, karena pemeriksaannya menyangkut grup secara keseluruhan.

Radio: Satu Cukup #

Aturan grupnya terlihat pada pemilihan ukuran minuman berikut — perhatikan di mana required dipasang:

html 
<input type="radio" id="uk-kecil" name="ukuran" value="kecil">
<label for="uk-kecil">Kecil</label>
<input type="radio" id="uk-sedang" name="ukuran" value="sedang" required>
<label for="uk-sedang">Sedang</label>
<input type="radio" id="uk-besar" name="ukuran" value="besar">
<label for="uk-besar">Besar</label>

Selama tidak ada satu pun radio name="ukuran" yang dipilih, tombol kirim ditahan lengkap dengan pesan bawaan. Memasang required pada ketiga radio tidak menimbulkan galat — hasilnya sama — namun satu saja sudah cukup dan lebih ringkas dibaca.

Contoh: Pendaftaran Workshop #

html 
<form action="/daftar" method="post">
  <label for="nama">Nama lengkap</label>
  <input type="text" id="nama" name="nama" required>
  <label for="surel">Alamat email</label>
  <input type="email" id="surel" name="surel" required>
  <label for="sesi">Tanggal sesi</label>
  <input type="date" id="sesi" name="sesi" required>
  <label for="setuju">
    <input type="checkbox" id="setuju" name="setuju" value="ya" required>
    Saya setuju dengan ketentuan workshop
  </label>
  <button type="submit">Daftar</button>
</form>

Hasil Render saat Budi menekan tombol Daftar tanpa mengisi apa pun:

  • Browser membatalkan pengiriman; halaman tidak berpindah.
  • Pesan bawaan “Isi kolom ini” muncul di dekat kolom nama lengkap.
  • Fokus keyboard melompat ke kolom nama; kolom kosong berikutnya menyusul diperiksa pada percobaan kirim berikutnya.

Mari kita telaah kode di atas:

  1. Baris 3 (required pada type="text"): kolom nama wajib berisi teks apa pun yang tidak kosong — panjang dan format belum turut diperiksa.
  2. Baris 5 (required pada type="email"): isian kosong ditolak dengan pesan bawaan; format email yang salah ditangani oleh validasi type yang kita bahas pada chapter tersendiri.
  3. Baris 7 (required pada type="date"): pemilih kalender harus sudah menetapkan satu tanggal sebelum form berangkat.
  4. Baris 8–11 (required pada checkbox): kotak wajib dicentang — pola standar untuk persetujuan syarat; label membalut input sehingga seluruh teksnya ikut bisa diklik.

Ringkasan #

  • required menahan submit selama kontrol kosong, memunculkan pesan bawaan, dan memfokuskan kolom galat pertama.
  • Berlaku pada text, email, url, number, date, checkbox, radio, select, file, dan textarea.
  • Grup radio cukup satu required pada salah satu anggotanya.
  • Atribut ini kenyamanan, bukan pengaman — server wajib memeriksa ulang.

Chapter berikutnya memeriksa isi kolom, bukan sekadar keberadaannya: minlength dan maxlength mengatur panjang teks.