0Pricing
HTML Academy · Pelajaran

Constraint Validation API

Baca status validitas dan periksa batasan dengan JavaScript.

Constraint Validation API adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Validasi Tanpa JavaScript

HTML5 memperkenalkan validasi formulir bawaan melalui atribut: required, type="email", type="number", min, max, pattern, minlength, maxlength. Peramban memvalidasi secara otomatis saat pengiriman dan menampilkan pesan kesalahan, tanpa memerlukan JS.

<input type="email" name="email" required>
<input type="number" name="age" min="18" max="120" required>
<input type="text" name="phone" pattern="\d{10}" required>

Pemilih Validasi CSS

:invalid mencocokkan bidang yang gagal divalidasi; :valid mencocokkan bidang yang lolos validasi. :user-invalid (versi modern) hanya mencocokkan bidang setelah pengguna berinteraksi, sehingga mencegah batas merah muncul pada formulir yang belum disentuh. Gunakan pseudokelas ini untuk menata kesalahan.

input:user-invalid {
  border-color: red;
}
input:user-invalid + .error {
  display: block;
}

Objek ValidityState

Setiap kendali formulir menyediakan properti validity—sebuah objek ValidityState dengan penanda bernilai benar atau salah: valid, valueMissing, typeMismatch, patternMismatch, rangeUnderflow, tooShort, dan sebagainya. Periksa objek ini untuk menentukan kesalahan yang harus ditampilkan.

const input = form.querySelector("input[type=email]");
if (input.validity.typeMismatch) {
  showError(input, "Please enter a valid email address");
}

Metode checkValidity

input.checkValidity() mengembalikan true jika nilainya memenuhi semua batasan, dan false jika tidak. form.checkValidity() memeriksa seluruh formulir. Ini berguna untuk pemeriksaan terprogram sebelum melakukan AJAX atau sebelum mengizinkan pengguna melanjutkan ke tahap berikutnya dalam alur bertahap.

Metode reportValidity

input.reportValidity() bekerja seperti checkValidity, tetapi juga memicu petunjuk bawaan peramban dan memfokuskan bidang pertama yang tidak valid. Gunakan ini jika Anda ingin memperoleh antarmuka bawaan tanpa usaha tambahan; gunakan checkValidity jika Anda ingin menampilkan kesalahan sepenuhnya secara kustom.

Menyesuaikan Pesan Bawaan

Pesan bawaan peramban ("Silakan isi bidang ini") mungkin tidak sesuai dengan gaya bahasa atau bahasa Anda. Gantilah dengan input.setCustomValidity("Enter a valid coupon code"). Bidang tersebut menjadi tidak valid sampai Anda menghapus pesannya dengan setCustomValidity("").

novalidate Menonaktifkan Antarmuka Peramban

Tambahkan novalidate pada formulir untuk menonaktifkan perilaku validasi bawaan peramban. Ini berguna saat Anda menerapkan tampilan kesalahan yang sepenuhnya kustom—formulir tetap dikirim terlepas dari apakah formulir tersebut akan lolos validasi, jadi lakukan pemeriksaan terprogram sebelum mengirimkannya.

Mendengarkan Peristiwa invalid

Setiap kendali memicu peristiwa invalid saat validasi gagal. Dengarkan peristiwa ini untuk menekan petunjuk bawaan dan menampilkan pesan kustom: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input); }).

Pola dengan Ekspresi Reguler

Atribut pattern berisi ekspresi reguler JavaScript yang harus dicocokkan oleh seluruh nilai (tidak perlu menggunakan jangkar ^ dan $ karena keduanya diterapkan secara implisit). Padukan dengan atribut title untuk menjelaskan format yang diharapkan kepada pengguna.

Validasi Sisi Server Tetap Diperlukan

Validasi HTML memberikan kemudahan bagi pengguna; siapa pun dapat melewatinya dengan mengubah DOM. Selalu lakukan validasi ulang di server. Batasan HTML ditujukan untuk pengalaman pengguna (umpan balik seketika dan lebih sedikit perjalanan bolak-balik), bukan untuk keamanan.

Menggabungkan Beberapa Batasan

Batasan saling bertumpuk: <input type="number" min="18" max="120" required step="1"> harus diisi, berupa bilangan bulat, dan berada di antara 18 dan 120. Peramban menyediakan informasi tentang batasan tertentu yang gagal melalui penanda ValidityState, sehingga Anda dapat menampilkan pesan yang tepat.

Pemeriksaan Pengetahuan

Apa perbedaan pseudokelas CSS :user-invalid dari :invalid?

Ringkasan

Atribut validasi bawaan (required, type, pattern, min, max) dan API ValidityState menyediakan validasi sisi klien yang andal tanpa JS secara bawaan. CSS :user-invalid menata kesalahan setelah pengguna berinteraksi. checkValidity/reportValidity menjalankan pemeriksaan terprogram. setCustomValidity mengganti pesan bawaan. Selalu lakukan validasi ulang di server.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Constraint Validation API” gratis?

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

Apa yang akan aku pelajari di “Constraint Validation API”?

Baca status validitas dan periksa batasan dengan JavaScript. Kamu berlatih HTML 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 HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML 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 2 dari 4.

Berapa lama pelajaran “Constraint Validation API” 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 HTML Academy ini?

Ya. Setiap pelajaran HTML 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

  1. FormData API
  2. Constraint Validation API
  3. reportValidity dan setCustomValidity
  4. Peristiwa Reset Formulir dan Pengelolaan Status
← Kembali ke HTML Academy