validasiminlengthminmaxMahir3 mnt baca

Validasi: Panjang dan Rentang Angka

minlength/maxlength untuk teks dan min/max/step untuk angka, dengan contoh nyata PIN, umur, dan jumlah pesanan.

Kenapa Batas Itu Penting

Tanpa batas, password satu karakter bisa lolos, umur 999 tahun tersimpan di database, dan seseorang memesan 1.000.000 tiket dalam sekali klik. Batasan panjang dan rentang adalah cara termurah menjaga logika bisnis tetap waras sebelum data menyentuh server.

minlength dan maxlength: Penggaris untuk Teks

maxlength memotong input yang kepanjangan, minlength menolak yang kependekan. Keduanya menghitung jumlah karakter:

html

<!-- PIN: harus tepat 6 digit -->
<label for="pin">PIN (6 digit):</label>
<input type="password" id="pin" name="pin"
  minlength="6" maxlength="6" required />

<!-- password: minimal 8 karakter, maksimal 64 -->
<label for="pw">Password:</label>
<input type="password" id="pw" name="pw"
  minlength="8" maxlength="64" required />

Perhatikan trik PIN: minlength="6" sekaligus maxlength="6" berarti panjangnya tepat 6, tidak kurang tidak lebih. Untuk password, batas atas 64 mencegah serangan yang mengirim teks raksasa untuk membebani hashing server.

min, max, dan step: Penggaris untuk Angka

Untuk type="number", penggarisnya berbeda: min dan max membatasi nilai, bukan jumlah karakter:

html

<!-- umur: 17 sampai 65 tahun -->
<label for="umur">Umur:</label>
<input type="number" id="umur" name="umur" min="17" max="65" required />

<!-- jumlah tiket: 1 sampai 8 per transaksi -->
<label for="tiket">Jumlah tiket:</label>
<input type="number" id="tiket" name="tiket" min="1" max="8" value="1" required />

Atribut step mengatur kelipatan yang diizinkan. Nilai default-nya 1 (bilangan bulat). Butuh kelipatan 500 untuk nominal donasi? Butuh desimal untuk berat badan?

html

<!-- donasi: kelipatan Rp500 -->
<label for="donasi">Donasi (Rp):</label>
<input type="number" id="donasi" name="donasi"
  min="10000" step="500" />

<!-- berat badan: boleh desimal -->
<label for="bb">Berat badan (kg):</label>
<input type="number" id="bb" name="bb"
  min="20" max="300" step="0.1" />

Nilai 12.500 lolos step="500", tapi 12.300 ditolak karena bukan kelipatan 500. step="0.1" mengizinkan satu angka desimal seperti 65,5.

Contoh Realistis: Form Pemesanan

html

<form>
  <label for="nama">Nama pemesan:</label>
  <input type="text" id="nama" name="nama"
    minlength="3" maxlength="50" required />

  <label for="jml">Jumlah tiket (maks 8):</label>
  <input type="number" id="jml" name="jml"
    min="1" max="8" value="1" required />

  <label for="anak">Jumlah anak di bawah 5 th (gratis):</label>
  <input type="number" id="anak" name="anak"
    min="0" max="4" value="0" />

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

Setiap batas di sini mencerminkan aturan bisnis nyata: nama tidak mungkin 1 huruf, tiket dibatasi agar tidak diborong calo, anak gratis dibatasi 4 per pemesan.

Salah vs Benar

html

<!-- SALAH: min/max tidak berpengaruh pada type="text" -->
<label for="u1">Umur:</label>
<input type="text" id="u1" name="umur" min="17" max="65" />

<!-- BENAR: min/max butuh type="number" -->
<label for="u2">Umur:</label>
<input type="number" id="u2" name="umur" min="17" max="65" />

html

<!-- SALAH: maxlength membatasi KARAKTER, bukan nilai angka -->
<!-- "1000000" (7 karakter) tetap lolos maxlength="6"? Tidak, -->
<!-- tapi "9" lolos padahal maunya minimal 1000. Salah alat. -->
<label for="n1">Nominal (min Rp1.000):</label>
<input type="number" id="n1" name="nominal" maxlength="6" />

<!-- BENAR: untuk nilai minimum pakai min -->
<label for="n2">Nominal (min Rp1.000):</label>
<input type="number" id="n2" name="nominal" min="1000" />

Catatan teknis: maxlength dihormati browser bahkan saat paste, tapi minlength hanya diperiksa saat submit. Dan seperti biasa, semua batas ini wajib divalidasi ulang di server: atribut HTML menjaga UX tetap mulus, bukan menjaga database tetap aman.

Live Playground

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

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

Tantangan

Form Donasi Berbatas

Buat form donasi: nama donatur text minlength 3 maxlength 50 required, nominal number min 10000 step 1000 required, dan pesan text maxlength 140 opsional. Batas yang tepat membuat aturan bisnis (minimal donasi, kelipatan transfer) ditegakkan sebelum data sampai ke server.

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

Open Sandbox