Validasi Input

Kelompok ketiga sekaligus panggung penutup validasi: satu textarea dengan batas panjang, satu persetujuan opsional, dan satu data teknis tersembunyi. Setelah fieldset ini terisi, seluruh atribut validasi form sudah terpasang — bagian ini menutupnya dengan menguji semuanya lewat skenario galat yang pasti terjadi pada responden sungguhan.

Fieldset Umpan Balik #

Ganti komentar penanda terakhir dengan kontrol berikut — sama persis dengan baris 84-90 berkas final:

        <label for="saran">Saran dan kesan Anda</label>
        <textarea id="saran" name="saran" rows="5" minlength="20" maxlength="500"></textarea>
        <label>
          <input type="checkbox" name="dihubungi" value="ya">
          Saya bersedia dihubungi untuk tindak lanjut survei ini
        </label>
        <input type="hidden" name="versi" value="1.0">

Mari kita bedah tiap kontrol:

1. textarea dengan rows, minlength, maxlength (baris 2): rows="5" menyiapkan lima baris tinggi sebelum satu baris CSS pun; minlength="20" menahan saran yang terlalu pendek untuk ditindaklanjuti; maxlength="500" memangkas ketikan saat melewati batas — pasangan lantai-langit dari chapter Minlength dan Maxlength.
2. minlength dan kolom kosong: minlength hanya memeriksa teks yang ada. Kolom saran tidak required — responden yang melewatkan tetap lolos; pemeriksaan mulai bekerja begitu responden menulis. Keputusan sadar: saran dipersilakan kosong, yang ditahan hanyalah saran yang setengah jadi.
3. Checkbox persetujuan (baris 3-6): opsional — tidak dicentang berarti pasangan dihubungi tidak terkirim sama sekali; dicentang berarti dihubungi=ya ikut berangkat.
4. input type="hidden" (baris 7): versi=1.0 terkirim tanpa pernah tampil di layar — penanda bagi server tentang versi pertanyaan mana yang dijawab responden, materi chapter Hidden Input.

Tiga Skenario Uji #

Atribut validasi tidak cukup dipercaya begitu saja — uji dengan skenario yang pasti muncul di dunia nyata. Isi form sepenuhnya dengan sah, lalu ulangi pengisian dengan satu kerusakan tiap putaran:

Perhatikan pola yang sama pada ketiganya: browser memeriksa seluruh kontrol, menahan pengiriman, memfokuskan kontrol bermasalah yang pertama, lalu menampilkan pesan bawaannya — tanpa satu baris JavaScript. Kontrol bermasalah berikutnya baru muncul setelah yang pertama diperbaiki dan tombol ditekan lagi. Mekanisme di baliknya adalah Constraint Validation yang dibedah chapter Browser Validation.

Simpan Draf: formnovalidate (Tidak Dipakai) #

Form panjang kerap menyediakan tombol kedua “Simpan draf” yang boleh mengirim data setengah jadi — atribut formnovalidate pada tombol semacam itu memerintahkan browser melewati pemeriksaan. Survei kita justru tidak memakainya: delapan isian yang selesai dalam lima menit tidak beralasan disimpan setengah jadi, dan tombol kedua hanya menambah pilihan yang menunda. formnovalidate menjadi tepat pada form pendaftaran bertingkat, artikel draf, atau pengaturan akun — bukan survei singkat.

Hasil pada Browser #

textarea tampil lima baris tinggi dengan labelnya di atas; checkbox persetujuan di bawahnya; input tersembunyi tidak merender apa pun — ia memang tidak dirender, bukan sekadar tidak terlihat. Jalankan ketiga skenario uji di atas satu per satu dan amati fokus yang melompat ke kolom bermasalah. Lalu isi seluruh form dengan sah dan tekan Kirim Survei: browser mengirim data ke https://example.com/survei dan menampilkan respons domain contoh — tanda alur pengiriman berjalan penuh.

Form lengkap di bawah ini siap menjadi tiket uji — jalankan ketiga skenarionya langsung: kirim kosong, tulis email tanpa @, isi usia 9, lalu perbaiki semuanya dan kirim dengan sah:

Pada demo, submit sah berpindah di dalam iframe — data berangkat ke https://example.com/survei lalu iframe dikosongkan karena domain contoh menolak ditampilkan dalam frame; muat ulang halaman untuk mengulang.

Ringkasan Bagian 4 #

• Fieldset Umpan balik memuat textarea ber-minlength/maxlength, checkbox persetujuan opsional, dan input tersembunyi versi.
• Tiga skenario uji — form kosong, email salah format, usia di bawah min — semuanya ditahan browser dengan fokus dan pesan bawaan.
• formnovalidate tidak dipakai: survei lima menit tidak beralasan menyimpan draf setengah jadi.
• Validasi klien adalah kenyamanan; server wajib memeriksa ulang.

Bagian terakhir meninjau seluruh form dari sisi aksesibilitas: label, kelompok, urutan fokus, dan pesan galat.