💡 ULASAN & REFERENSI • DIPERBARUI: 24 October 2026 • REDAKSI AZWINN

Validasi Minlength Maxlength HTML & JavaScript

Pengertian Atribut Minlength dan Maxlength

Atribut minlength dan maxlength adalah batasan validasi bawaan HTML5 yang diterapkan pada elemen input teks (seperti <input type="text">, <password>, <textarea>). Atribut ini menentukan jumlah minimum dan maksimum karakter yang diizinkan agar sebuah form dapat dikirimkan (submitted) oleh peramban web tanpa memerlukan pustaka eksternal.

Penerapan atribut ini langsung berinteraksi dengan mesin validasi bawaan HTML (HTML5 Constraint Validation API). Jika pengguna memasukkan teks yang kurang dari minlength atau melebihi maxlength, browser secara otomatis akan mencegah form terkirim dan menampilkan pesan peringatan bawaan.

Tabel Perbandingan Atribut Validasi Panjang Karakter

Atribut Fungsi Utama Elemen yang Didukung Perilaku Browser saat Dilanggar
minlength Menetapkan batas minimum jumlah karakter yang harus diisi. text, search, url, tel, password, email, textarea Menampilkan pesan error bawaan dan memblokir submit form.
maxlength Menetapkan batas maksimum jumlah karakter yang dapat diketik. text, search, url, tel, password, email, textarea Mencegah pengetikan karakter tambahan setelah batas tercapai.

Contoh Implementasi Kode HTML

Berikut adalah contoh kode penggunaan atribut minlength dan maxlength secara langsung di dalam elemen form HTML:

<form>
  <label for="username">Username (Min 5, Maks 15 karakter):</label>
  <input type="text" id="username" name="username" minlength="5" maxlength="15" required>
  <button type="submit">Kirim</button>
</form>

Validasi Tambahan Menggunakan JavaScript

Meskipun HTML menyediakan validasi otomatis, seringkali pengembang web memerlukan kontrol lebih besar atas tampilan pesan kesalahan atau ingin memeriksa panjang karakter secara real-time. Berikut adalah cuplikan kode JavaScript untuk mendeteksi pelanggaran minlength menggunakan Constraint Validation API:

const inputElement = document.getElementById('username');

inputElement.addEventListener('input', function() {
  if (inputElement.validity.tooShort) {
    inputElement.setCustomValidity('Karakter terlalu pendek! Minimal 5 karakter.');
  } else {
    inputElement.setCustomValidity('');
  }
});

Troubleshooting & Tips Lapangan

  • Atribut maxlength menghentikan pengetikan: Berbeda dengan minlength yang baru memicu error saat form dikirim (atau saat validasi API dipanggil), maxlength secara fisik menghentikan pengguna mengetik lebih lanjut begitu batas tercapai.
  • Kombinasi dengan atribut required: Jika input tidak wajib diisi (tidak ada atribut required), maka input yang kosong (0 karakter) akan dianggap valid meskipun ada aturan minlength. Atribut minlength hanya memicu validasi jika pengguna mulai mengisi setidaknya satu karakter tetapi kurang dari batas minimum.
  • Kompatibilitas peramban: Seluruh peramban modern (Chrome, Firefox, Safari, Edge) mendukung penuh atribut minlength dan maxlength tanpa memerlukan polyfill.

🔍 Orang Lain Juga Mencari Ini