Validasi Form HTML5 Bawaan: Atribut pattern, min, max, minlength, dan maxlength
Daftar Isi
HTML menyediakan sistem validasi form bawaan yang disebut constraint validation. Bagi pembuat form yang sudah memahami elemen seperti form, label, input, textarea, dan button, sistem ini merupakan langkah berikutnya sebelum menambahkan JavaScript atau library validasi. Browser dapat memeriksa sejumlah aturan langsung dari atribut HTML, menolak pengiriman form yang tidak valid, serta menampilkan antarmuka pemberitahuan kesalahan sesuai browser dan sistem operasi. Lima atribut yang sangat berguna adalah pattern, min, max, minlength, dan maxlength. Walaupun namanya terlihat serupa, kelimanya tidak dapat saling menggantikan. pattern menguji bentuk teks terhadap regular expression; min dan max membatasi rentang nilai pada tipe input yang mendukungnya; sedangkan minlength dan maxlength berhubungan dengan panjang teks. Tutorial ini membuat sebuah form pendaftaran kegiatan sebagai contoh konsisten. Tidak diperlukan framework, package, server, atau JavaScript. Anda hanya membutuhkan editor teks dan browser modern untuk membuka file index.html.
Validasi di browser terutama bermanfaat untuk memberi umpan balik cepat dan mengurangi data yang jelas tidak sesuai sebelum form dikirim. Namun, validasi HTML bukan pengganti validasi di server. Pengguna atau program lain dapat mengirim permintaan tanpa melalui form Anda, dan markup pada sisi klien dapat dimodifikasi. Karena itu, aturan penting seperti batas angka, format pengenal, dan panjang data tetap harus diperiksa kembali oleh aplikasi server ketika form digunakan dalam sistem nyata. Di sisi HTML, kita akan mempelajari kapan suatu kontrol menjadi valid atau tidak valid, bagaimana atribut required berinteraksi dengan aturan lain, serta cara menguji hasil menggunakan perilaku browser. Contoh sengaja menggunakan pola regular expression yang sederhana dan portabel, bukan ekspresi rumit yang sulit dipelihara. Form contoh tidak mempunyai tujuan pengiriman nyata; action="" dipakai agar latihan berfokus pada constraint validation. Ketika tombol diklik, browser akan menjalankan validasi interaktif sebelum pengiriman normal dilakukan. Jika kontrol pertama yang bermasalah ditemukan, browser umumnya memfokuskan kontrol tersebut dan menampilkan pesan validasi yang redaksinya dapat berbeda antarbrowser.
Landasan Sains dan Prinsip Kerja Metode
Constraint validation bekerja dengan seperangkat kondisi validitas yang dimiliki kontrol form. Misalnya, input wajib yang kosong dapat mengalami kondisi valueMissing; nilai angka di bawah batas dapat mengalami rangeUnderflow; nilai di atas batas dapat mengalami rangeOverflow; teks yang tidak sesuai pattern dapat mengalami patternMismatch; dan pembatasan panjang dapat berhubungan dengan tooShort atau tooLong. Nama-nama tersebut juga tersedia melalui API JavaScript ValidityState, meskipun JavaScript tidak diperlukan untuk latihan ini. Browser menggabungkan kondisi-kondisi tersebut untuk menentukan apakah sebuah kontrol memenuhi constraint yang berlaku. Ketika form dikirim dengan cara normal melalui tombol submit, browser menjalankan validasi interaktif untuk kontrol yang menjadi kandidat constraint validation. Jika ada kontrol tidak valid, pengiriman normal diblokir. Atribut required penting untuk dipahami secara terpisah: banyak constraint tidak otomatis berarti kolom wajib diisi. Sebagai contoh, sebuah input teks dengan pattern dapat tetap valid saat kosong apabila required tidak ditetapkan. Karena form pendaftaran membutuhkan setiap data pada contoh ini, atribut required akan ditambahkan secara eksplisit.
pattern diterapkan pada tipe input tertentu yang menerima teks, termasuk text, tel, email, url, password, dan search. Nilainya adalah regular expression yang digunakan browser untuk memeriksa nilai kontrol. Secara semantik, nilai harus cocok dengan keseluruhan pola, bukan sekadar memiliki substring yang cocok. Karena itu, contoh kode peserta [A-Z]{3}-[0-9]{4} menerima bentuk seperti WEB-2026, tetapi tidak menerima tambahan karakter di depan atau belakangnya. Dalam standar HTML modern, ekspresi pada pattern dikompilasi menggunakan aturan regular expression JavaScript dengan mode Unicode yang ditetapkan spesifikasi; fitur regex yang lebih baru dapat mempunyai pertimbangan kompatibilitas pada browser lama. Untuk latihan dasar, kelas karakter ASCII seperti [A-Z] dan [0-9] menghindari kompleksitas tersebut. Atribut ini juga tidak menyediakan pesan kesalahan universal yang Anda tulis sendiri tanpa bantuan mekanisme tambahan. Atribut title dapat memberi petunjuk mengenai format yang diharapkan, tetapi teks title tidak semestinya menjadi satu-satunya instruksi karena cara browser menyajikannya tidak seragam.
min dan max tidak mengukur jumlah karakter. Keduanya menetapkan batas nilai untuk tipe yang memiliki konsep rentang, seperti number, range, serta beberapa tipe tanggal dan waktu. Pada input type="number", misalnya, min="18" dan max="65" berarti nilai 17 berada di bawah rentang dan nilai 66 berada di atasnya. Sebaliknya, minlength dan maxlength menentukan panjang minimum dan maksimum pada kontrol tekstual yang mendukung atribut tersebut, seperti sejumlah tipe input berbasis teks dan textarea. Panjang HTML dihitung menurut satuan panjang string yang didefinisikan platform, sehingga karakter Unicode tertentu dapat membuat asumsi sederhana “satu simbol visual sama dengan satu unit” tidak selalu tepat. Browser juga biasanya membatasi masukan pengguna setelah maxlength tercapai. Untuk tujuan validasi, penting menguji melalui interaksi pengguna, bukan menyimpulkan seluruh perilaku hanya dengan mengubah nilai lewat DevTools atau kode. Selain itu, min dan max berinteraksi dengan step pada input numerik; sebuah angka dapat berada di dalam rentang tetapi tetap tidak cocok dengan langkah yang disyaratkan.
Formula, Komposisi Bahan, atau Spesifikasi Parameter
Sebelum menulis file lengkap, petakan setiap kebutuhan bisnis ke constraint HTML yang memang sesuai. Tabel berikut menggunakan parameter form pendaftaran kegiatan yang akan dipakai sampai akhir tutorial. Pemisahan ini mencegah kesalahan umum seperti menggunakan maxlength untuk membatasi nilai numerik atau menggunakan max untuk menentukan panjang nama. Beberapa atribut pendamping, terutama required dan type, disertakan karena perilakunya menentukan apakah lima atribut utama memberikan hasil yang dimaksud.
| Komponen | Spesifikasi/Rasio | Fungsi Teknis |
|---|---|---|
| Nama peserta | minlength="3", maxlength="50" | Membatasi panjang masukan teks nama |
| Kode peserta | pattern="[A-Z]{3}-[0-9]{4}" | Mewajibkan tiga huruf kapital, tanda hubung, dan empat digit |
| Usia | type="number", min="18", max="65" | Membatasi nilai numerik pada rentang 18 sampai 65 |
| Jumlah kursi | type="number", min="1", max="4" | Membatasi jumlah kursi antara 1 dan 4 |
| Tanggal kegiatan | type="date", min="2026-10-01", max="2026-12-31" | Membatasi tanggal pada periode latihan yang ditetapkan |
| Kata sandi akses | minlength="8", maxlength="20" | Menentukan panjang teks kata sandi latihan |
| Catatan | minlength="10", maxlength="200" | Membatasi panjang isi textarea |
| Status wajib | required | Mencegah nilai kosong pada field yang diwajibkan |
| Petunjuk kode | title="Format: ABC-1234" | Memberi keterangan tambahan tentang pola yang diharapkan |
| Tombol pengiriman | type="submit" | Memicu proses pengiriman dan constraint validation normal |
novalidate pada elemen form atau formnovalidate pada tombol submit jika tujuan pengujian adalah mengamati validasi bawaan, karena keduanya dapat melewati validasi interaktif saat pengiriman.Panduan Langkah Kerja Bertahap
Membuat Dokumen dan Constraint Panjang Teks
Buat file index.html dan mulai dari form minimal yang mempunyai kolom nama. Karena latihan ini tidak memerlukan build tool atau server, file dapat disimpan lalu dibuka langsung melalui browser. Gunakan minlength="3" dan maxlength="50" pada input nama. Tambahkan required karena batas panjang tidak dimaksudkan sebagai pengganti kewajiban mengisi. Secara praktis, minlength menyatakan bahwa masukan pengguna harus mempunyai panjang minimum yang ditetapkan, sedangkan maxlength menetapkan maksimum. Browser juga dapat mencegah pengguna mengetik melampaui maksimum pada kontrol yang mendukungnya. Label dihubungkan ke kontrol menggunakan pasangan for="nama" dan id="nama", sehingga struktur tetap mudah digunakan dengan mouse, keyboard, dan teknologi bantu.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Validasi Form Pendaftaran</title>
</head>
<body>
<h1>Pendaftaran Kegiatan</h1>
<form action="" method="get">
<p>
<label for="nama">Nama peserta:</label>
<input
id="nama"
name="nama"
type="text"
minlength="3"
maxlength="50"
required
>
</p>
<button type="submit">Daftar</button>
</form>
</body>
</html>Simpan file, muat ulang halaman, lalu klik tombol Daftar ketika kolom kosong. Browser seharusnya menolak pengiriman karena required. Berikutnya, ketik dua karakter secara manual dan coba kirim; nilai itu belum memenuhi minlength="3". Ketik nama dengan tiga karakter atau lebih untuk memperoleh nilai yang memenuhi batas minimum. Untuk menguji maksimum, teruskan mengetik dan perhatikan bahwa kontrol membatasi input pengguna sesuai maxlength="50". Pesan visual validasi tidak harus sama antarbrowser, jadi parameter keberhasilan yang penting adalah apakah pengiriman normal diblokir untuk data yang melanggar constraint. Pada contoh dengan method="get", ketika nilai valid dan pengiriman berlangsung, URL dapat berubah karena browser melakukan submit ke URL dokumen saat ini dengan data form sebagai query. Itu merupakan perilaku pengiriman form, bukan pesan “validasi berhasil”.
Menambahkan Format Kode dengan pattern
Selanjutnya tambahkan kolom kode peserta di dalam form, tepat sebelum tombol submit. Di sini bentuk data lebih penting daripada sekadar panjang. Format yang dipilih adalah tiga huruf kapital ASCII, tanda hubung, lalu empat digit ASCII, misalnya WEB-2026. Regular expression [A-Z]{3}-[0-9]{4} menyatakan aturan itu secara langsung. Kuantifier {3} meminta tiga karakter dari kelas sebelumnya, sedangkan {4} meminta empat digit. HTML menerapkan pola terhadap keseluruhan nilai untuk keperluan constraint tersebut, jadi kita tidak perlu menambahkan penanda awal dan akhir hanya demi memperoleh pencocokan seluruh nilai. Contoh ini merupakan snippet yang ditambahkan ke dokumen dari langkah pertama, bukan file mandiri.
<p>
<label for="kode">Kode peserta:</label>
<input
id="kode"
name="kode"
type="text"
pattern="[A-Z]{3}-[0-9]{4}"
title="Format: ABC-1234"
required
>
</p>Letakkan snippet tersebut sebelum <button type="submit">, simpan, dan muat ulang. Uji WEB-2026 sebagai contoh valid. Kemudian coba web-2026, WEB2026, dan ABCD-2026; masing-masing tidak memenuhi pola karena huruf kecil, tanda hubung yang hilang, atau jumlah huruf yang salah. Agar pengujian tidak tertahan kolom nama, isi nama dengan minimal tiga karakter. title memberi informasi format yang berguna, tetapi label atau teks bantuan yang selalu terlihat biasanya lebih ramah pengguna daripada mengandalkan cara browser menampilkan title. Jangan menggunakan pattern sebagai pengganti required: bila sebuah kontrol tidak wajib dan nilainya kosong, pola pada umumnya tidak membuat kekosongan itu menjadi pelanggaran. Hasil yang diharapkan pada langkah ini adalah hanya string dengan struktur tiga huruf kapital, tanda hubung, dan empat digit yang lolos constraint pola ketika kolom diisi.
Menerapkan min dan max pada Nilai Angka
Tambahkan dua input angka sebelum tombol submit: usia dan jumlah kursi. Berbeda dari teks, kita ingin membatasi nilai matematis, bukan banyaknya digit. Karena itu gunakan type="number" bersama min dan max. Usia latihan dibatasi 18 sampai 65, sedangkan jumlah kursi dibatasi 1 sampai 4. Jangan mencoba maxlength="2" untuk membatasi usia pada input angka; maxlength bukan mekanisme pembatas rentang pada type="number". Jika aturan bisnis menyatakan “tidak kurang dari 18 dan tidak lebih dari 65”, representasi tepatnya memang min="18" dan max="65".
<p>
<label for="usia">Usia:</label>
<input
id="usia"
name="usia"
type="number"
min="18"
max="65"
required
>
</p>
<p>
<label for="kursi">Jumlah kursi:</label>
<input
id="kursi"
name="kursi"
type="number"
min="1"
max="4"
required
>
</p>Masukkan snippet ke form sebelum tombol, kemudian isi field lain dengan data valid. Uji usia 17; pengiriman harus tertahan karena nilainya lebih kecil daripada minimum. Uji 66 untuk kasus di atas maksimum, kemudian 18 dan 65 untuk memastikan kedua nilai batas termasuk rentang yang diperbolehkan. Pada jumlah kursi, uji 0, 1, 4, dan 5 dengan logika serupa. Tombol spinner yang mungkin ditampilkan browser bukan mekanisme keamanan dan tampilannya berbeda menurut browser. Pengguna bahkan dapat memasukkan nilai dengan cara lain, sehingga constraint tetap menjadi bagian penting. Perhatikan juga bahwa aturan step merupakan constraint tersendiri. Untuk contoh bilangan bulat ini, perilaku langkah bawaan pada number sesuai kebutuhan, sehingga kita tidak perlu menambahkan atribut lain. Verifikasi berhasil ketika nilai di luar batas diblokir saat submit, sementara nilai batas 18/65 dan 1/4 tidak menghasilkan pelanggaran rentang.
Membatasi Tanggal dan Menambah Field Teks Lain
Prinsip min dan max juga dapat diterapkan pada input type="date". Untuk contoh yang dapat diuji secara konsisten, periode pendaftaran latihan ditetapkan dari 1 Oktober 2026 hingga 31 Desember 2026. Nilai atribut tanggal memakai bentuk tahun-bulan-hari seperti 2026-10-01, terlepas dari bagaimana browser memvisualisasikan tanggal kepada pengguna berdasarkan lokal. Tambahkan pula kata sandi akses sepanjang 8 sampai 20 unit panjang serta catatan sepanjang 10 sampai 200. Kata sandi di sini hanya contoh validasi panjang; pada sistem sungguhan, pembatasan dan kebijakan kata sandi harus dirancang berdasarkan kebutuhan keamanan, dan password tidak boleh diperlakukan aman hanya karena memenuhi panjang HTML.
<p>
<label for="tanggal">Tanggal kegiatan:</label>
<input
id="tanggal"
name="tanggal"
type="date"
min="2026-10-01"
max="2026-12-31"
required
>
</p>
<p>
<label for="sandi">Kata sandi akses:</label>
<input
id="sandi"
name="sandi"
type="password"
minlength="8"
maxlength="20"
required
>
</p>
<p>
<label for="catatan">Catatan:</label>
<textarea
id="catatan"
name="catatan"
minlength="10"
maxlength="200"
required
></textarea>
</p>Tambahkan snippet sebelum tombol submit dan muat ulang halaman. Untuk tanggal, uji 2026-09-30 sebagai nilai di bawah minimum, 2026-10-01 sebagai batas bawah, 2026-12-31 sebagai batas atas, dan 2027-01-01 sebagai nilai di atas maksimum apabila antarmuka browser mengizinkan Anda memasukkan nilai tersebut. Pemilih tanggal suatu browser dapat sejak awal membatasi pilihan yang tersedia, sehingga pengujian visual dapat berbeda. Pada kata sandi, ketik kurang dari delapan karakter dan coba submit; pada catatan, coba kurang dari sepuluh karakter. Kemudian isi keduanya dalam rentang yang diperbolehkan. Hasil yang dicari bukan tampilan kalender tertentu, melainkan status constraint: tanggal dalam periode tidak mengalami pelanggaran batas, sedangkan tanggal di luar periode tidak dapat lolos pengiriman normal. Field teks juga harus memenuhi batas panjang ketika pengguna memasukkan nilainya secara normal.
Menyatukan Semua Constraint dalam File Lengkap
Sekarang ganti isi index.html dengan versi lengkap berikut agar tidak ada risiko snippet tertaruh di luar form atau ID terduplikasi. Ini adalah dokumen HTML mandiri dan dapat dibuka tanpa dependency eksternal. Semua field memakai nama, ID, label, tipe, dan batas yang sudah diperkenalkan. Teks bantuan untuk kode peserta ditampilkan langsung sehingga pengguna tidak harus menebak format. Perhatikan pula bahwa tidak ada atribut novalidate. Form menggunakan method="get" semata-mata agar latihan mudah diamati; metode tersebut bukan pilihan yang tepat untuk mengirim rahasia dalam aplikasi produksi karena data form dapat muncul pada URL. Contoh kata sandi ini hanya data demonstrasi, jadi jangan memasukkan password nyata ketika melakukan latihan.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Validasi Form Pendaftaran</title>
</head>
<body>
<h1>Pendaftaran Kegiatan</h1>
<form action="" method="get">
<p>
<label for="nama">Nama peserta:</label>
<input id="nama" name="nama" type="text"
minlength="3" maxlength="50" required>
</p>
<p>
<label for="kode">Kode peserta:</label>
<input id="kode" name="kode" type="text"
pattern="[A-Z]{3}-[0-9]{4}"
title="Format: ABC-1234" required>
<small>Format: ABC-1234</small>
</p>
<p>
<label for="usia">Usia:</label>
<input id="usia" name="usia" type="number"
min="18" max="65" required>
</p>
<p>
<label for="kursi">Jumlah kursi:</label>
<input id="kursi" name="kursi" type="number"
min="1" max="4" required>
</p>
<p>
<label for="tanggal">Tanggal kegiatan:</label>
<input id="tanggal" name="tanggal" type="date"
min="2026-10-01" max="2026-12-31" required>
</p>
<p>
<label for="sandi">Kata sandi akses:</label>
<input id="sandi" name="sandi" type="password"
minlength="8" maxlength="20" required>
</p>
<p>
<label for="catatan">Catatan:</label>
<textarea id="catatan" name="catatan"
minlength="10" maxlength="200"
required></textarea>
</p>
<button type="submit">Daftar</button>
</form>
</body>
</html>Simpan dan buka ulang index.html. Isi data valid, misalnya nama tiga karakter atau lebih, kode WEB-2026, usia 25, dua kursi, tanggal di dalam periode, kata sandi demonstrasi minimal delapan karakter, dan catatan minimal sepuluh karakter. Ketika semua constraint terpenuhi, browser tidak seharusnya memblokir submit karena aturan yang kita buat. Karena action="" dan metode GET digunakan, halaman dapat dimuat kembali dengan query string. Jangan menafsirkan reload itu sebagai penyimpanan data: tidak ada server pada latihan ini. Verifikasi struktur juga dengan memastikan setiap label berhubungan dengan ID yang tepat dan tidak ada atribut batas yang tertukar antara teks dengan angka.
Menguji Kasus Batas dan Validitas Secara Sistematis
Pengujian yang baik tidak hanya memasukkan satu nilai benar. Buka file lengkap dari langkah sebelumnya dan buat tiga kelompok percobaan: tepat di bawah batas, tepat pada batas, serta tepat di atas batas. Untuk usia, gunakan 17, 18, 65, dan 66. Untuk kursi, gunakan 0, 1, 4, dan 5. Untuk tanggal, bandingkan tanggal sebelum 1 Oktober, kedua tanggal batas, dan tanggal sesudah 31 Desember 2026. Pada kode peserta, ubah satu aspek setiap kali: kapitalisasi, jumlah huruf, tanda hubung, atau jumlah digit. Metode ini membantu mengetahui constraint mana yang sebenarnya sedang diuji, dibanding mengisi banyak data salah sekaligus lalu hanya melihat field pertama yang dikeluhkan browser.
Untuk panjang teks, masukkan nilai melalui keyboard atau paste lalu lakukan submit. Uji nama dua karakter dan tiga karakter, serta kata sandi demonstrasi tujuh dan delapan karakter. Ketika menguji maxlength, browser dapat mencegah penambahan karakter begitu maksimum tercapai; itu sendiri merupakan hasil yang dapat diamati. Jangan bergantung pada manipulasi atribut atau nilai melalui DevTools untuk menyimpulkan bagaimana constraint panjang bekerja terhadap masukan pengguna normal, karena validasi panjang memiliki detail perilaku yang berkaitan dengan perubahan nilai oleh pengguna. Untuk pemeriksaan tambahan tanpa menulis JavaScript, browser DevTools dapat digunakan hanya untuk mengonfirmasi bahwa atribut seperti min, max, dan pattern memang berada pada elemen yang benar.
Hasil akhir yang diharapkan adalah perilaku konsisten: nilai kosong tertahan oleh required; format kode yang salah tertahan oleh pattern; nilai angka dan tanggal di luar batas tertahan oleh min atau max; serta teks yang dimasukkan pengguna harus mengikuti batas panjang yang berlaku. Browser mungkin menampilkan pesan dengan bahasa dan redaksi berbeda, sehingga jangan menggunakan kalimat pesan sebagai satu-satunya kriteria pengujian. Verifikasi utama adalah apakah nilai yang seharusnya tidak valid mencegah pengiriman normal dan apakah seluruh nilai batas yang sah dapat melewati pemeriksaan. Jika hasil berbeda, periksa tipe input, ejaan atribut, posisi atribut pada kontrol yang tepat, dan keberadaan novalidate sebelum menambah JavaScript.
Verifikasi Akhir dan Parameter Kelayakan
Setelah keenam langkah selesai, nilai keberhasilan dari constraint yang dapat diuji, bukan dari tampilan pesan browser. Gunakan file lengkap pada Langkah 5 dan lakukan pengujian manual seperti Langkah 6. Parameter berikut merangkum perubahan dari form yang belum memiliki aturan khusus menuju form dengan validasi HTML bawaan. “Target” berarti perilaku yang diharapkan berdasarkan constraint contoh, bukan jaminan keamanan data. Untuk produksi, pengujian lintas browser yang memang didukung proyek serta validasi ulang di server tetap diperlukan.
| Parameter | Sebelum Menerapkan Metode | Sesudah Menerapkan Metode (Target) |
|---|---|---|
| Format kode peserta | Teks bebas | WEB-2026 valid; web-2026 tidak memenuhi pattern contoh |
| Rentang usia | Tidak memiliki batas khusus | 18 dan 65 valid; 17 dan 66 melanggar rentang |
| Jumlah kursi | Tidak memiliki batas khusus | Nilai 1 sampai 4 memenuhi rentang |
| Panjang nama | Tidak memiliki batas panjang khusus | Masukan pengguna harus berada pada rentang 3 sampai 50 unit panjang |
| Rentang tanggal | Tidak memiliki periode khusus | Tanggal 2026-10-01 sampai 2026-12-31 memenuhi batas |
Solusi Masalah di Lapangan (FAQ Teknis)
1. Mengapa pattern tidak menolak kolom yang kosong?pattern menentukan bentuk nilai ketika constraint pola relevan terhadap nilai yang diisi; atribut tersebut bukan deklarasi bahwa field wajib mempunyai nilai. Jika kebutuhan form menyatakan kode peserta wajib diisi, gunakan required seperti pada contoh. Setelah itu, kekosongan ditangani oleh constraint kewajiban nilai, sedangkan teks yang ada tetapi formatnya salah ditangani oleh constraint pola. Periksa juga apakah pattern ditempatkan pada tipe input yang mendukungnya dan apakah form tidak memakai novalidate. Cara verifikasinya sederhana: dengan required aktif, submit nilai kosong, kemudian masukkan format salah seperti web-2026, dan terakhir masukkan WEB-2026. Ketiga percobaan membedakan kewajiban isi dari validasi format.
2. Mengapa maxlength tidak cocok untuk membatasi input type="number"?maxlength adalah constraint panjang untuk kontrol tekstual yang mendukungnya, sedangkan type="number" memiliki semantik nilai numerik. Jika persyaratannya usia antara 18 dan 65, gunakan min="18" serta max="65". Ini juga lebih tepat secara konseptual: angka 100 mempunyai tiga digit, tetapi masalah sebenarnya bukan jumlah digitnya melainkan nilainya melebihi 65. Jika kebutuhan Anda justru sebuah identifier yang hanya terlihat seperti angka tetapi tidak dipakai untuk perhitungan, desainnya dapat memerlukan input tekstual dengan constraint yang sesuai, bukan otomatis type="number". Verifikasi contoh dengan menguji 17, 18, 65, dan 66 dan perhatikan status pengiriman form.
3. Mengapa nilai dalam rentang min dan max masih dapat dianggap tidak valid?
Rentang bukan satu-satunya constraint yang mungkin berlaku. Pada input numerik, aturan step juga dapat memengaruhi validitas, dan field yang wajib tetap harus mempunyai nilai. Pada tipe lain terdapat pula constraint khusus berdasarkan tipenya. Karena itu, jangan menyimpulkan bahwa setiap kegagalan di antara min dan max disebabkan oleh rentang. Periksa tipe input dan seluruh atribut constraint pada elemen, dimulai dari required, min, max, dan step. Pada contoh tutorial, rentang usia menggunakan bilangan bulat dan tidak menetapkan step khusus. Uji nilai batas yang dicantumkan untuk memastikan konfigurasi dasar berperilaku sesuai tujuan sebelum menambahkan constraint lain.
4. Mengapa pesan validasi terlihat berbeda di browser lain?
HTML menentukan constraint dan mekanisme validitas, tetapi antarmuka validasi interaktif, termasuk redaksi dan penyajian pesan, dapat berbeda menurut browser, platform, dan bahasa pengguna. Karena itu, tutorial yang bergantung pada teks pesan tertentu akan rapuh. Gunakan perilaku sebagai dasar pengujian: apakah submit ditahan untuk nilai yang tidak valid dan dilepas ketika semua constraint terpenuhi. Jika aplikasi membutuhkan presentasi pesan yang sepenuhnya dikendalikan, JavaScript dan desain aksesibilitas tambahan dapat digunakan, tetapi kompleksitasnya lebih tinggi daripada cakupan validasi bawaan ini. Jangan menghapus validasi bawaan sekadar karena tampilan pesannya berbeda. Untuk kompatibilitas proyek nyata, uji pada browser yang secara resmi Anda dukung dan pastikan instruksi format penting tersedia sebagai teks yang terlihat.
Kesimpulan dan Rencana Aksi
Validasi HTML5 bawaan memberi cara deklaratif untuk menangani banyak pemeriksaan form tanpa dependency tambahan. Gunakan pattern ketika nilai teks harus mengikuti bentuk tertentu, min dan max ketika tipe input mempunyai rentang nilai, serta minlength dan maxlength ketika yang dibatasi adalah panjang teks. Tambahkan required secara terpisah saat field memang wajib, karena batas format atau panjang tidak semestinya dianggap otomatis membuat field wajib. Sebagai latihan lanjutan, pertahankan index.html dari tutorial ini lalu buat daftar kasus uji untuk setiap field: kosong, tepat di bawah batas, tepat pada batas, tepat di atas batas, dan format salah jika pattern digunakan. Setelah memahami perilaku tersebut, pelajari API constraint validation seperti checkValidity(), reportValidity(), validity, dan setCustomValidity() ketika kebutuhan benar-benar memerlukan JavaScript. Pada aplikasi yang mengirim data ke backend, langkah berikut yang lebih penting adalah menerapkan aturan yang konsisten pada server. Validasi browser meningkatkan pengalaman pengguna; keputusan apakah data dapat dipercaya tetap harus dibuat oleh sistem yang menerima dan memproses data.
Ditulis dan diedit oleh Ahmad Ismail Al Malik