Form Doğrulama Öznitelikleri
required, minlength, maxlength, pattern, min, max ve step özniteliklerini uygulayın; doğrulama durumlarını :valid ve :invalid sözde sınıflarıyla stillendirin.
Form Doğrulama Öznitelikleri, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Yerel Tarayıcı Doğrulaması
HTML5, öznitelikler aracılığıyla yerleşik form doğrulaması sağlar. Bir form gönderildiğinde tarayıcı her alanı doğrular. Doğrulama başarısız olursa yerel bir hata balonu gösterir ve gönderimi engeller; temel durumlar için JavaScript gerekmez.
required
Bir girdi, seçim listesi veya metin alanına required eklemek onu zorunlu kılar. Form gönderildiğinde alan boşsa tarayıcı bir hata gösterir.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength ve maxlength
minlength, en az karakter sayısını zorunlu kılar. maxlength, belirlenen üst sınırı aşan girdileri engeller. Parola karmaşıklığını zorunlu kılmak veya yorum uzunluklarını sınırlamak için ikisini birlikte kullanın.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>Sayısal Girdiler için min, max ve step
min ve max, sayı ve tarih girdileri için geçerli aralığı belirler. step, artış miktarını belirler; aralıklar, yüzde değerleri, ondalık hassasiyet veya yalnızca tarih kullanımı için yararlıdır.
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — Düzenli İfade Doğrulaması
pattern, bir JavaScript düzenli ifadesini kabul eder. Formun gönderilebilmesi için girdinin bu örüntüyle eşleşmesi gerekir. Tarayıcının hata balonunda beklenen biçimi açıklamak için bir title ekleyin.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — Yerel Doğrulamayı Devre Dışı Bırakma
Tüm yerel tarayıcı doğrulamasını devre dışı bırakmak için novalidate özniteliğini <form> öğesine ekleyin. Kullanıcıya tutarlı bir deneyim sunmak amacıyla özel JavaScript doğrulaması uyguladığınızda bunu yapın.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>JavaScript'te Geçerliliği Denetleme
Kısıtlama Doğrulama API'si, geçerliliği programatik olarak denetlemenizi sağlar: input.validity (ValidityState nesnesi), input.checkValidity() (doğru/yanlış değeri döndürür), input.setCustomValidity(message) (özel hata ayarlar).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
Bir girdiyi özel bir iletiyle geçersiz olarak işaretlemek için setCustomValidity(message) yöntemini boş olmayan bir dizeyle çağırın. Hatayı temizlemek için boş bir dizeyle çağırın. Kullanıcı adının benzersizliği gibi sunucuda doğrulanan alanlar için kullanışlıdır.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}:valid ve :invalid Sözde Sınıfları
Geçerli ve geçersiz girdileri CSS sözde sınıflarıyla biçimlendirin. Dikkatli olun: Kullanıcı onlarla etkileşime geçmeden önce girdiler :invalid durumundadır. Önce bir "etkileşimde bulunuldu" sınıfı eklemek için :user-invalid (modern tarayıcılar) veya JavaScript kullanın.
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }reportValidity ile Özel Hata İletileri
form.reportValidity(), tüm alanlarda tarayıcının yerel doğrulama arayüzünü tetikler. Özel geçerlilik iletilerini ayarladıktan sonra, gönderme olayını beklemeden bunları kullanıcıya göstermek için kullanın.
Erişilebilir Hata Gösterme Kalıbı
Satır içi hataları şu şekilde gösterin: 1) girdide aria-invalid="true", 2) aria-describedby ile ilişkilendirilmiş görünür bir hata paragrafı, 3) odağı ilk geçersiz alana taşıma. Bu yöntem, ekran okuyucu kullananlar dahil tüm kullanıcılara hizmet eder.
Hızlı Kontrol
Bir metin girdisini en fazla 280 karakterle sınırlayan öznitelik hangisidir?
Özet: Form Doğrulama Öznitelikleri
Zorunlu alan, minimum/maksimum uzunluk, minimum/maksimum/adım ve desen — tümü ücretsiz yerel tarayıcı doğrulaması sağlar. Özel JS doğrulaması uygularken novalidate kullanın. Kısıtlama Doğrulama API'si, JavaScript'in geçerlilik durumuna erişmesini sağlar. Kullanıcı etkileşime geçtikten sonra hataları :user-invalid ile biçimlendirin.
Sıkça Sorulan Sorular
“Form Doğrulama Öznitelikleri” dersi ücretsiz mi?
Evet — “Form Doğrulama Öznitelikleri” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Form Doğrulama Öznitelikleri” dersinde ne öğreneceğim?
required, minlength, maxlength, pattern, min, max ve step özniteliklerini uygulayın; doğrulama durumlarını :valid ve :invalid sözde sınıflarıyla stillendirin. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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 4. dersidir.
“Form Doğrulama Öznitelikleri” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- Form Denetimleri: input türleri, select, textarea
- ARIA ve Erişilebilirlik: label role aria-*
- Anlamsal HTML5: Anlamsal Yapı ve Div Karmaşası
- Form Doğrulama Öznitelikleri