Tutorial HTML / Validasi formulir: required, panjang teks, dan rentang nilai

Validasi formulir bawaan di HTML dapat memeriksa nilai yang hilang, panjang teks, rentang angka, dan format input tertentu sebelum pengiriman. Atribut seperti required, minlength, dan max membantu browser untuk memandu pengguna. Namun, ini tidak menggantikan validasi di sisi server.

Meminta nilai dan membatasi panjangnya

Untuk mencoba setiap cuplikan berikut, buat berkas validation.html dengan struktur dokumen HTML dasar. Letakkan satu contoh formulir di dalam body, simpan sebagai UTF-8, lalu buka di browser. Uji contoh satu per satu agar kolom dari contoh lain tidak memengaruhi hasil. Setelah mengubah aturan, simpan dan muat ulang halaman.

<form method="get">
  <label for="nickname">Nama samaran (2 hingga 20 karakter)</label>
  <input id="nickname" name="nickname" type="text"
         required minlength="2" maxlength="20">
  <button type="submit">Periksa</button>
</form>

Cobalah mengirimkan bidang kosong, kemudian satu karakter, lalu dua karakter. required memeriksa keberadaan suatu nilai, sedangkan minlength memeriksa panjang teks yang dimasukkan pengguna; tidak satu pun dari keduanya menyiratkan yang lain. Pesan tepat dari browser bervariasi tergantung pada browser, sistem operasi, dan bahasa. Beritahu pengguna tentang aturan tersebut sebelum mereka mengirimkan sesuatu, daripada hanya mengandalkan pesan kesalahan. Batas panjang dapat berperilaku berbeda jika nilai diisi melalui skrip, jadi uji masukan yang diprogram secara terpisah jika formulir Anda menggunakannya.

maxlength="20" biasanya mencegah pengguna memasukkan lebih dari batasannya. HTML mengukur batas ini dalam unit kode dari pengkodean Unicode UTF-16, yang tidak selalu sesuai dengan jumlah karakter yang terlihat – misalnya pada beberapa Emoji. Jika Anda mengizinkan karakter seperti itu, uji masukan aktual bersama dengan aturan panjang server. Lihat referensi MDN maxlength.

Periksa rentang nilai atau format dasar

<form method="get">
  <label for="people">Peserta (1–10)</label>
  <input id="people" name="people" type="number"
         min="1" max="10" step="1" required>

  <label for="email">Alamat email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Periksa</button>
</form>

min dan max menentukan rentang nilai; step menentukan nilai kenaikan yang diperbolehkan. Masukkan secara manual 0, 11, dan 2,5 dan bandingkan dengan tombol kenaikan. Pemisah desimal tergantung pada bahasa browser: Gunakan 2.5 jika 2,5 tidak diterima. Fakta bahwa sebuah nilai terlihat di kolom input tidak berarti bahwa nilai tersebut sah untuk dikirimkan. type="email" memeriksa format dasar alamat, bukan apakah kotak email benar-benar ada. Pilih tipe input berdasarkan makna nilai di Pemilihan tipe input untuk email, angka, tanggal, dan pilihan.

Ini adalah formulir GET yang dikirim ke URL saat ini untuk latihan. Gunakan nilai uji seperti name@example.com dan jangan alamat pribadi yang sebenarnya. Setelah nilai melewati validasi browser, Anda dapat memeriksa people dan email dalam string kueri URL. Contoh ini tidak menyertakan server yang menerima atau menyimpan data.

Berikan petunjuk yang berguna untuk pemecahan masalah

Jangan hanya menandai kesalahan dengan warna. "Masukkan angka bulat dari 1 hingga 10" memberikan lebih banyak informasi bagi pengguna dibandingkan "Input tidak valid". Saat membuat pesan kustom, hubungkan setiap pesan dengan kontrol yang sesuai dan pastikan pengguna dapat kembali ke sana menggunakan keyboard. Atribut novalidate pada form mengabaikan validasi interaktif bawaan saat pengiriman; jangan hanya menambahkannya untuk menyembunyikan masalah. Buat kondisi tetap terlihat dan hubungkan dengan kontrol menggunakan petunjuk dari Tambahkan teks panduan ke bidang formulir.

Seseorang dapat melewati pemeriksaan browser dengan alat pengembang atau permintaan langsung. Selalu validasi data penting di server, terutama nilai-nilai yang digunakan untuk akun, pembayaran, atau entri yang disimpan. Pemeriksaan di sisi browser membantu pengguna memperbaiki kesalahan mereka; pemeriksaan di sisi server melindungi aplikasi. Konsultasikan panduan MDN untuk validasi pembatasan.

Sebelum menambahkan antarmuka kesalahan kustom, terapkan juga pemeriksaan aksesibilitas untuk penggunaan keyboard, fokus, dan nama.

Bandingkan batas dengan kesalahan validasi yang diharapkan

Bidang peserta menggunakan min="1" max="10" step="1" wajib diisi. Masukkan setiap nilai dan coba untuk mengirim, sambil mempertahankan email uji yang diformat dengan benar agar kesalahan pada bidang lain tidak menutupi hasil.

Formulasi tepat dari kesalahan bawaan bervariasi. Tabel membedakan batasan yang gagal, alih-alih memberikan pesan. Jumlah peserta 2 yang valid tidak membuat seluruh formulir valid jika kolom lain masih gagal.

Petunjuk bawaan mengikuti batasan HTML. Antarmuka kesalahan khusus harus mengaitkan pesan dengan kontrolnya serta mengelola perubahan status dan fokus. Ini memerlukan implementasi dan pengujian tambahan; aria-describedby saja tidak membuat validasi.

Uji aturan sendiri

1. Biarkan satu bidang wajib kosong dan coba kirim formulir.
2. Cobalah nilai yang sedikit di luar dan di dalam setiap batas yang ditentukan.
3. Gunakan hanya keyboard untuk menjangkau bidang, membaca kesalahan, memperbaiki, dan mengirim kembali.