JavaScript Academy · Pelajaran

API Validasi Batasan

Gunakan pemeriksaan validitas bawaan.

API Validasi Batasan adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Validasi Bawaan

Kolom formulir HTML mendukung atribut seperti required, min, max, pattern, dan type="email". API Validasi Batasan memungkinkan JavaScript memeriksa dan mengendalikan validasi bawaan ini.

checkValidity

checkValidity mengembalikan boolean dan memicu peristiwa invalid pada setiap kontrol yang gagal tanpa menampilkan gelembung pesan dari peramban.

const email = document.querySelector("#email");
console.log(email.checkValidity());

reportValidity

reportValidity bekerja seperti checkValidity, tetapi juga menampilkan antarmuka pesan validasi peramban untuk kolom yang tidak valid.

if (!form.reportValidity()) {
  console.log("show built-in errors");
}

Objek validity

Setiap kontrol memiliki objek validity yang berisi tanda boolean untuk menjelaskan dengan tepat masalah yang terjadi.

console.log(email.validity.valueMissing);  // empty required
console.log(email.validity.typeMismatch);  // wrong format
console.log(email.validity.tooShort);

validity.valid

validity.valid hanya bernilai true saat kolom memenuhi setiap batasan, sehingga merangkum tanda-tanda lainnya.

if (email.validity.valid) {
  console.log("ok");
}

validationMessage

validationMessage berisi pesan setempat yang akan ditampilkan peramban untuk kesalahan saat ini.

console.log(email.validationMessage);

setCustomValidity

setCustomValidity menandai kolom sebagai tidak valid dengan pesan Anda sendiri. String yang tidak kosong berarti tidak valid; string kosong menghapusnya.

function checkMatch() {
  if (pass.value !== confirm.value) {
    confirm.setCustomValidity("Passwords must match");
  } else {
    confirm.setCustomValidity("");
  }
}

Selalu Hapus Kesalahan Khusus

Jika Anda menetapkan pesan khusus, Anda harus menghapusnya dengan string kosong setelah kolom valid; jika tidak, kolom akan tetap tidak valid selamanya.

confirm.addEventListener("input", () => {
  confirm.setCustomValidity("");
  checkMatch();
});

Peristiwa invalid

Dengarkan peristiwa invalid untuk menjalankan logika khusus, seperti memberi gaya pada kolom, saat validasi gagal.

email.addEventListener("invalid", () => {
  email.classList.add("error");
});

Menonaktifkan Gelembung Bawaan

Tambahkan novalidate ke formulir untuk menekan jendela pop-up bawaan, sambil tetap menggunakan API untuk pesan Anda sendiri.

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

Memberi Gaya dengan :valid dan :invalid

Pseudo-kelas CSS :valid dan :invalid memberi gaya pada kolom berdasarkan keadaan validasinya secara otomatis.

Pemeriksaan Cepat

Aturan validasi khusus.

Ringkasan

API Validasi Batasan bekerja dengan atribut batasan HTML. Gunakan checkValidity/reportValidity untuk menguji (dan, jika perlu, menampilkan) kesalahan, periksa tanda validity dan validationMessage, lalu tambahkan aturan khusus dengan setCustomValidity (hapus dengan string kosong). Peristiwa invalid dan CSS :valid/:invalid membantu pemberian gaya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “API Validasi Batasan” gratis?

Ya — teks lengkap “API Validasi Batasan” 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 “API Validasi Batasan”?

Gunakan pemeriksaan validitas bawaan. 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 4 dari 4.

Berapa lama pelajaran “API Validasi Batasan” 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