0Pricing
HTML Academy · Ders

Kısıtlama Doğrulama API'sinin Temelleri

Constraint Validation API ile geçerlilik durumunu ve özel iletileri okuyun

Kısıtlama Doğrulama API'sinin Temelleri, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Kısıt Doğrulama API'si Nedir?

Kısıt Doğrulama API'si, form doğrulama durumunu okumak ve ayarlamak için kullanılan bir JavaScript arayüzüdür:

  • Bir alanın geçerli olup olmadığını denetleme
  • Hangi özel kısıtın başarısız olduğunu okuma
  • Özel hata iletileri ayarlama
  • Tarayıcı doğrulama arayüzünü programlı olarak tetikleme

validity Özelliği

Her form denetiminin, belirli doğru/yanlış işaretlerine sahip bir validity nesnesi vardır:

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

checkValidity Yöntemi

checkValidity(), true/false döndürür ve invalid olayını tetikler:

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

reportValidity Yöntemi

reportValidity(), tarayıcının yerel doğrulama arayüzünü gösterir:

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();

validationMessage Özelliği

validationMessage, tarayıcının hata iletisi dizesini döndürür:

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), özel bir doğrulama hatası ayarlar:

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
  }
});

Özel Geçerliliği Temizleme

Kullanıcı sorunu düzelttiğinde özel geçerlilik durumu temizlenmelidir:

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' : '');
});

invalid Olayı

invalid olayı, doğrulamayı geçemeyen form denetimlerinde tetiklenir:

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);
  });
});

will-validate Özelliği

willValidate, öğe kısıt doğrulamasına katılıyorsa true değerini taşır:

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

Özel Doğrulamada Validity Kullanımı

Eksiksiz bir özel doğrulama örneği:

<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>

ValidityState İşaretlerinin Özeti

Tüm ValidityState işaretleri:

  • valueMissing — zorunlu ancak boş
  • typeMismatch — yanlış tür biçimi
  • patternMismatch — desen düzenli ifadesi başarısız
  • tooShort / tooLong — minlength/maxlength
  • rangeUnderflow / rangeOverflow — min/max
  • stepMismatch — geçerli bir adım değeri değil
  • customError — setCustomValidity ile ileti ayarlanmış
  • badInput — tarayıcı değeri ayrıştıramıyor

Hızlı Kontrol

Tarayıcının yerel doğrulama hata açılır penceresini programlı olarak nasıl gösterirsiniz?

Tekrar: Kısıt Doğrulama API'si

Kısıt Doğrulama API'si için temel bilgiler:

  • input.validity — belirli işaretlere sahip ValidityState nesnesi
  • checkValidity() — true/false döndürür, invalid olayını tetikler
  • reportValidity() — denetler ve yerel hata arayüzünü gösterir
  • validationMessage — tarayıcının hata dizesi
  • setCustomValidity(msg) — özel hata ayarlar; temizlemek için boş dize kullanılır

Sıkça Sorulan Sorular

“Kısıtlama Doğrulama API'sinin Temelleri” dersi ücretsiz mi?

Evet — “Kısıtlama Doğrulama API'sinin Temelleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Kısıtlama Doğrulama API'sinin Temelleri” dersinde ne öğreneceğim?

Constraint Validation API ile geçerlilik durumunu ve özel iletileri okuyun HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Kısıtlama Doğrulama API'sinin Temelleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. required pattern min max ve maxlength
  2. novalidate Özniteliği
  3. Kısıtlama Doğrulama API'sinin Temelleri
  4. HTML5 ve JavaScript Doğrulamasının Avantajları ve Dezavantajları
← HTML Academy Sayfasına Dön