Validasi Formulir Bawaan dan Constraint Validation API

Mengapa Validasi Sisi Klien (Client-Side) Penting, dan Apa Batasannya?

Validasi formulir di peramban memiliki satu tujuan utama: memberikan umpan balik instan kepada pengguna yang jujur. Daripada pengguna harus menunggu pengiriman formulir ke server hanya untuk diberi tahu bahwa format surel mereka kurang tanda @, peramban dapat langsung menandainya dalam hitungan milidetik.

Namun, ingat prinsip keamanan fundamental yang selalu ditekankan di Kodeloka:

1. Atribut Validasi Deklaratif HTML5

Tanpa menulis satu baris JavaScript pun, HTML5 menyediakan atribut pembatas (constraints) yang langsung diperiksa oleh peramban saat tombol type="submit" ditekan:

Contoh Penggunaan pattern dan title yang Ramah Pengguna

Ketika Anda menggunakan atribut pattern, selalu berikan petunjuk format yang jelas di dalam teks bantuan atau atribut title, karena peramban akan menyertakan isi title di dalam gelembung pesan galat bawaannya:

<div class="kolom-form">
  <label for="username-kodeloka">Nama Pengguna (Username)</label>
  <input
    type="text"
    id="username-kodeloka"
    name="username"
    required
    minlength="4"
    maxlength="20"
    pattern="[a-z0-9_]+"
    title="Gunakan 4–20 karakter berupa huruf kecil (a-z), angka (0-9), atau garis bawah (_)."
    aria-describedby="bantuan-username"
  >
  <small id="bantuan-username">
    Hanya huruf kecil, angka, dan garis bawah (4–20 karakter, tanpa spasi).
  </small>
</div>

2. Mengatur Gaya CSS: Mengapa :user-invalid Lebih Baik daripada :invalid?

Di CSS, terdapat pseudo-class :valid dan :invalid untuk memberi warna bingkai hijau atau merah pada input. Namun, ada satu masalah klasik yang sangat mengganggu pada :invalid:

Saat halaman baru saja dibuka dan pengguna belum sempat mengetik apa pun, setiap kolom yang memiliki atribut required sudah berstatus :invalid! Akibatnya, seluruh formulir langsung menyala merah seolah-olah pengguna baru saja melakukan kesalahan.

Solusi modern di CSS (tersedia di semua peramban utama sejak November 2023 dan berstatus Baseline Widely Available sejak Mei 2026) adalah menggunakan :user-invalid dan :user-valid:

• :user-invalid hanya aktif setelah pengguna benar-benar berinteraksi dengan kolom tersebut (misalnya mengetik lalu menghapusnya, atau mencoba menekan tombol Submit) dan nilainya masih salah!

/* Bingkai standar saat belum disentuh pengguna */
input, select, textarea {
  border: 1.5px solid #94a3b8;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

/* Hanya tampil merah SETELAH pengguna berinteraksi dan isiannya tidak valid */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: #dc2626;
  background-color: #fef2f2;
}

/* Tampil hijau setelah pengguna mengisi dengan benar */
input:user-valid {
  border-color: #16a34a;
}

3. Mengenal Constraint Validation API Dasar

Bagaimana jika pesan galat bawaan peramban (yang mengikuti bahasa sistem operasi pengguna) kurang jelas, atau Anda perlu memeriksa apakah kolom "Konfirmasi Kata Sandi" sama persis dengan kolom "Kata Sandi Baru"?

HTML menyediakan Constraint Validation API pada setiap elemen kontrol formulir:

• elemen.validity: Objek ValidityState yang berisi properti boolean spesifik penyebab kegagalan:
  • valueMissing: Gagal karena required kosong.
  • typeMismatch: Gagal karena format type="email" atau type="url" salah.
  • patternMismatch: Gagal karena tidak cocok dengan regex pattern.
  • tooShort / tooLong: Gagal karena minlength / maxlength.
  • rangeUnderflow / rangeOverflow: Gagal karena min / max.
  • valid: Bernilai true jika semua syarat terpenuhi.
• elemen.setCustomValidity(pesan): Mengatur pesan galat kustom.
  • Penting: Jika Anda memanggil setCustomValidity("Pesan galat"), elemen tersebut akan dianggap tidak valid sampai Anda memanggil kembali setCustomValidity("") (dengan string kosong) saat pengguna memperbaiki isiannya!
• elemen.checkValidity() dan elemen.reportValidity(): Memeriksa status validasi (dan reportValidity() sekaligus menampilkan pesan galat ke layar).

<form id="form-sandi">
  <div>
    <label for="sandi-utama">Kata Sandi Baru (min. 8 karakter)</label>
    <input type="password" id="sandi-utama" name="password" minlength="8" required>
  </div>

  <div>
    <label for="sandi-ulang">Ulangi Kata Sandi Baru</label>
    <input type="password" id="sandi-ulang" name="password_confirm" minlength="8" required>
  </div>

  <button type="submit">Simpan Kata Sandi</button>
</form>

<script>
  const sandiUtama = document.getElementById("sandi-utama");
  const sandiUlang = document.getElementById("sandi-ulang");

  function periksaKecocokanSandi() {
    if (sandiUlang.value !== sandiUtama.value) {
      sandiUlang.setCustomValidity("Konfirmasi kata sandi belum sama dengan kata sandi baru.");
    } else {
      // Wajib dikosongkan kembali agar status input kembali valid!
      sandiUlang.setCustomValidity("");
    }
  }

  sandiUtama.addEventListener("input", periksaKecocokanSandi);
  sandiUlang.addEventListener("input", periksaKecocokanSandi);
</script>

Kesalahan Umum dan Cara Menghindarinya

1. Lupa mereset setCustomValidity("") menjadi string kosong:
   • Salah: Memanggil input.setCustomValidity("Format salah") saat gagal, tetapi tidak memanggil input.setCustomValidity("") saat pengguna sudah memperbaiki ketikannya. Akibatnya, formulir terkunci selamanya dan tidak pernah bisa dikirim!
2. Menambahkan novalidate pada <form> tanpa menyediakan pengganti yang aksesibel:
   • Atribut <form novalidate> mematikan gelembung pesan bawaan peramban. Hanya gunakan novalidate jika Anda benar-benar menulis skrip pengganti yang menampilkan pesan galat tekstual di layar dan mengaitkannya ke input dengan aria-invalid="true" serta aria-describedby.

Latihan Praktik: Formulir Pemesanan Server Cloud dengan Validasi Lengkap

Buatlah berkas validasi-server.html untuk pemesanan instans VPS:

1. Kolom Hostname Server (required, panjang 3–15 karakter, hanya boleh huruf kecil, angka, dan tanda hubung -, serta tidak boleh diawali atau diakhiri tanda hubung: pattern="[a-z0-9]+(-[a-z0-9]+)*").
2. Kolom Jumlah vCPU (type="number", minimal 2, maksimal 64, dan harus kelipatan genap step="2").
3. Aturan CSS menggunakan :user-invalid dan :user-valid agar warna batas kotak berubah hanya setelah pengguna berinteraksi.