JavaScript Academy · Pelajaran

Validasi di Sisi Klien

Validasi input sebelum mengirimkannya ke mana pun.

Validasi di Sisi Klien adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Alasan Melakukan Validasi di Sisi Klien

Validasi di sisi klien memberikan umpan balik seketika dan pengalaman yang lebih lancar. Ingatlah bahwa ini adalah kemudahan, bukan keamanan: selalu lakukan validasi di server juga.

Melakukan Validasi saat Submit

Pola yang umum adalah memeriksa kolom saat formulir dikirim dan membatalkan pengiriman jika ada bagian yang tidak valid.

form.addEventListener("submit", (e) => {
  if (!isValid()) {
    e.preventDefault();
  }
});

Memeriksa Kolom Wajib

Hapus spasi di awal dan akhir nilai, lalu tolak masukan yang kosong. Penghapusan spasi mencegah string yang hanya berisi spasi diterima.

function checkName() {
  const v = nameInput.value.trim();
  return v.length > 0;
}

Aturan Panjang

Bandingkan panjang yang sudah dibersihkan dengan batas minimum dan maksimum untuk kolom seperti kata sandi.

function checkPassword() {
  const v = passwordInput.value;
  return v.length >= 8 && v.length <= 64;
}

Pencocokan Pola

Ekspresi reguler menguji format seperti bentuk alamat email. Buat pola tetap sederhana dan padukan dengan pemeriksaan di server.

function checkEmail() {
  const v = emailInput.value.trim();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}

Menampilkan Pesan Kesalahan

Tampilkan umpan balik di dekat kolom menggunakan elemen khusus untuk kesalahan dan textContent agar tetap aman dari XSS.

function showError(field, msg) {
  const err = field.nextElementSibling;
  err.textContent = msg;
}

Menghapus Kesalahan

Atur ulang pesan saat kolom menjadi valid agar kesalahan lama tidak terus ditampilkan.

function clearError(field) {
  field.nextElementSibling.textContent = "";
}

Validasi Langsung

Lakukan validasi pada peristiwa input atau blur untuk memberikan umpan balik waktu nyata saat pengguna mengetik atau meninggalkan kolom.

emailInput.addEventListener("blur", () => {
  if (!checkEmail()) showError(emailInput, "Invalid email");
  else clearError(emailInput);
});

Aksesibilitas dengan aria-invalid

Atur aria-invalid dan hubungkan kesalahan dengan aria-describedby agar teknologi bantu mengumumkan masalah.

emailInput.setAttribute("aria-invalid", "true");

Memfokuskan Kesalahan Pertama

Saat pengiriman gagal, pindahkan fokus ke kolom pertama yang tidak valid agar pengguna dapat segera memperbaikinya.

function focusFirstError(fields) {
  const bad = fields.find((f) => !f.valid);
  if (bad) bad.el.focus();
}

Lakukan Validasi di Sisi Server Juga

Validasi klien dapat dilewati dengan menonaktifkan JavaScript atau membuat permintaan secara khusus. Perlakukan server sebagai sumber kebenaran.

Pemeriksaan Cepat

Pola pikir keamanan.

Ringkasan

Validasi manual memeriksa kolom (wajib diisi, panjang, pola) dan membatalkan submit saat gagal dengan preventDefault. Tampilkan dan hapus pesan dengan aman menggunakan textContent, lakukan validasi langsung pada input/blur, tingkatkan aksesibilitas dengan aria-invalid, dan fokuskan kesalahan pertama. Selalu lakukan validasi ulang di server.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Validasi di Sisi Klien” gratis?

Ya — teks lengkap “Validasi di Sisi Klien” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Validasi di Sisi Klien”?

Validasi input sebelum mengirimkannya ke mana pun. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Validasi di Sisi Klien” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy