HTML Academy · Pelajaran

Dasar-Dasar Constraint Validation API

Baca status validitas dan pesan khusus dengan Constraint Validation API.

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

Apa Itu API Validasi Constraint?

API Validasi Constraint adalah antarmuka JavaScript untuk membaca dan mengatur status validasi formulir:

Memeriksa apakah suatu bidang valid
Membaca kendala spesifik yang gagal
Menetapkan pesan kesalahan kustom
Memicu UI validasi peramban secara terprogram

Properti validity

Setiap kontrol formulir memiliki objek validity dengan penanda boolean tertentu:

const input = document.getElementById('email');
const v = input.validity;

console.log(v.valid);         // true if all constraints pass
console.log(v.valueMissing);  // true if required but empty
console.log(v.typeMismatch);  // true if type doesn't match (e.g. bad email)
console.log(v.patternMismatch); // true if pattern fails
console.log(v.tooShort);      // true if shorter than minlength
console.log(v.tooLong);       // true if longer than maxlength
console.log(v.rangeUnderflow); // true if less than min
console.log(v.rangeOverflow);  // true if more than max

Metode checkValidity

checkValidity() mengembalikan true/false dan memicu peristiwa invalid:

const form = document.getElementById('my-form');

// Check entire form:
if (!form.checkValidity()) {
  console.log('Form has errors');
}

// Check individual field:
const email = document.getElementById('email');
if (!email.checkValidity()) {
  console.log('Email is invalid');
}
// The 'invalid' event fires on invalid fields

Metode reportValidity

reportValidity() menampilkan UI validasi bawaan peramban:

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

// Shows native browser error tooltip if invalid:
const valid = input.reportValidity();
console.log(valid);  // true or false

// On a form: validates all fields and shows first error:
document.getElementById('form').reportValidity();

Properti validationMessage

validationMessage mengembalikan string pesan kesalahan dari peramban:

const email = document.querySelector('input[type=email]');
email.value = 'not-an-email';

console.log(email.validationMessage);
// e.g. "Please include an '@' in the email address..."

console.log(email.validity.typeMismatch); // true

setCustomValidity

setCustomValidity(message) menetapkan kesalahan validasi kustom:

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

// Check availability on blur:
username.addEventListener('blur', async () => {
  const res = await fetch(`/check-username?name=${username.value}`);
  const { taken } = await res.json();

  if (taken) {
    username.setCustomValidity('This username is already taken.');
  } else {
    username.setCustomValidity('');  // empty string = clear the error
  }
});

Menghapus Validitas Kustom

Anda harus menghapus validitas kustom saat pengguna memperbaiki masalah:

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

input.addEventListener('input', () => {
  // Clear custom error when user starts typing again:
  input.setCustomValidity('');
});

input.addEventListener('blur', async () => {
  // Re-validate on blur:
  const taken = await checkUsername(input.value);
  input.setCustomValidity(taken ? 'Username taken' : '');
});

Peristiwa invalid

Peristiwa invalid dipicu pada kontrol formulir yang gagal divalidasi:

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('invalid', (e) => {
    e.preventDefault();  // prevent default browser tooltip
    // Show your custom error UI instead:
    showError(input, input.validationMessage);
  });
});

Properti willValidate

willValidate bernilai true jika elemen tersebut mengikuti validasi constraint:

document.querySelectorAll(':input').forEach(el => {
  if (el.willValidate) {
    console.log(el.name, 'will be validated');
  }
});
// Disabled, hidden, or output elements return willValidate = false

Menggunakan Validity dalam Validasi Kustom

Contoh validasi kustom lengkap:

<form id="signup" novalidate>
  <input type="email" id="email" name="email" required>
  <span id="email-err" role="alert"></span>
  <button type="submit">Sign Up</button>
</form>

<script>
const form = document.getElementById('signup');
const email = document.getElementById('email');
const err = document.getElementById('email-err');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  err.textContent = '';

  if (email.validity.valueMissing) {
    err.textContent = 'Email is required.';
    email.focus();
    return;
  }
  if (email.validity.typeMismatch) {
    err.textContent = 'Enter a valid email address.';
    email.focus();
    return;
  }
  // Submit...
});
</script>

Ringkasan Penanda ValidityState

Semua penanda ValidityState:

valueMissing — wajib diisi tetapi kosong
typeMismatch — format tipe salah
patternMismatch — pola regex tidak cocok
tooShort / tooLong — minlength/maxlength
rangeUnderflow / rangeOverflow — min/max
stepMismatch — bukan nilai langkah yang valid
customError — pesan setCustomValidity telah ditetapkan
badInput — peramban tidak dapat mengurai nilainya

Pemeriksaan Cepat

Bagaimana cara menampilkan pop-up kesalahan validasi bawaan peramban secara terprogram?

Ringkasan: API Validasi Constraint

Hal-hal penting tentang API Validasi Constraint:

input.validity — objek ValidityState dengan penanda tertentu
checkValidity() — mengembalikan true/false, memicu peristiwa invalid
reportValidity() — memeriksa + menampilkan UI kesalahan bawaan
validationMessage — string kesalahan dari peramban
setCustomValidity(msg) — menetapkan kesalahan kustom; gunakan string kosong untuk menghapusnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar Constraint Validation API” gratis?

Ya — teks lengkap “Dasar-Dasar 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 “Dasar-Dasar Constraint Validation API”?

Baca status validitas dan pesan khusus dengan Constraint Validation API. 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 3 dari 4.

Berapa lama pelajaran “Dasar-Dasar 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

required pattern min max dan maxlength
Atribut novalidate
Dasar-Dasar Constraint Validation API
Perbandingan Validasi HTML5 dan JavaScript

← Kembali ke HTML Academy