reportValidity ve setCustomValidity
Tarayıcı doğrulama arayüzünü tetikleyin ve özel hata iletileri belirleyin
reportValidity ve setCustomValidity, 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.
Yerleşik Kullanıcı Deneyimi için İki Arayüz
Kısıt Doğrulama uygulama programlama arayüzü, tarayıcının yerleşik doğrulama arayüzünü yöneten iki yöntem sunar: reportValidity (araç ipucunu gösterir) ve setCustomValidity (özel bir hata mesajı sağlar). Bu ikisi, yerel sunumu korurken mesajları özelleştirmenizi sağlar.
reportValidity ile checkValidity Karşılaştırması
checkValidity(), arayüzde herhangi bir yan etki oluşturmadan true/false döndürür. reportValidity() aynı denetimi yapar; ayrıca ilk geçersiz alana odaklanır ve tarayıcının doğrulama araç ipucunu gösterir. Yerleşik kullanıcı deneyimini ek çalışma gerektirmeden istediğinizde reportValidity'yi seçin.
document.forms.signup.addEventListener("submit", (e) => {
if (!e.target.reportValidity()) {
e.preventDefault();
// browser already focused first invalid field and showed tooltip
}
});Programatik Doğrulama
Çok adımlı sihirbazlarda ilerlemeden önce her adımın alanlarını doğrulayın: if (step.reportValidity()) { next(); }. Tarayıcı hata gösterimini yönetir ve kullanıcı ilgilenilmesi gereken alana odaklanır; böylece odak yönetimini yeniden uygulamanız gerekmez.
setCustomValidity Mesajların Üzerine Yazar
Varsayılan mesajlar ("Please fill out this field") üslubunuza uymayabilir. input.setCustomValidity("Username is required"), varsayılan mesajı kendi metninizle değiştirir. Mesajı temizleyene kadar girdi geçersiz kabul edilir.
Özel Mesajları Temizleme
input.setCustomValidity(""), özel mesajı kaldırır ve normal doğrulamayı yeniden etkinleştirir. Bunu her yeniden doğrulama yaptığınızda çağırın; aksi halde kullanıcı sorunu düzelttikten sonra bile eski özel mesajlar kalır.
input.addEventListener("input", () => {
if (input.value.length < 3) {
input.setCustomValidity("Must be at least 3 characters");
} else {
input.setCustomValidity("");
}
});Asenkron Doğrulama
Sunucu tarafı denetimleri (kullanıcı adı benzersizliği, kupon geçerliliği) için asenkron yanıttan sonra setCustomValidity kullanın: const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken");. Tarayıcı yeni geçerlilik durumunu hemen algılar.
Özel Hata Arayüzüyle Birlikte Kullanma
Geçerlilik takibini sürdürürken kendi hata gösteriminizi kullanmak için invalid olayını dinleyin ve yerleşik araç ipucunu bastırmak üzere e.preventDefault() çağırın: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); }).
Birden Çok Özel Kısıt
setCustomValidity aynı anda yalnızca bir özel mesajı destekler. Birkaç kuralı uygulamak için her birini denetleyin ve öncelik sırasındaki en ilgili mesajla setCustomValidity çağırın. Gösterilen mesaj, ilk başarısız kurala ait olur.
Yerleşik Kısıtlarla Çakışmayın
Boş bir zorunlu alan için özel mesaj ayarlarsanız kendi mesajınız ile varsayılan mesaj çakışabilir. Her alan için tek bir yaklaşım seçin: yerleşik kısıtı devre dışı bırakıp ( type="text" kullanarak type="email" yerine ve setCustomValidity aracılığıyla doğrulayarak) tamamen özel doğrulama uygulayın ya da yerleşik doğrulamaya bütünüyle güvenin.
Form Düzeyinde Özel Doğrulama
Alanlar arası doğrulama (parola onayının eşleşmesi gibi) için setCustomValidity'yi ilişkili alana uygulayın: confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match"). Her iki değer eşleşene kadar form geçersizdir.
Uluslararasılaştırma
Yerleşik mesajlar, kullanıcının diline göre tarayıcı tarafından yerelleştirilir. setCustomValidity ile belirlediğiniz özel mesajları doğru dile kendiniz uyarlamalısınız — navigator.language değerini veya kendi yerelleştirme durumunuzu okuyup uygun çeviriyi sağlayın.
Sınama
DevTools'u açın ve her geçersiz yolu deneyin: boş gönderim, kısmi girdi, biçim uyuşmazlığı ve asenkron başarısızlık. Doğru mesajın gösterildiğini, sorun düzeltilince mesajın temizlendiğini ve geçerli bir form gönderildiğinde işlemin sürdüğünü doğrulayın. Kenar durumları (geçersiz biçimde yapıştırma, tarayıcının otomatik doldurması) için özel sınamalar gerekir.
Bilgi Kontrolü
input.setCustomValidity("Zaten kullanılıyor") çağrıldıktan sonra girdinin yeniden geçerli olduğunu tarayıcıya nasıl bildirirsiniz?
Özet
reportValidity, tarayıcının yerleşik doğrulama arayüzünü (odak + araç ipucu) tetikler ve programatik denetimler için idealdir. setCustomValidity varsayılan mesajların yerine kendi metninizi koyar; girdi yeniden geçerli olduğunda bunu boş dizeyle temizleyin. Tamamen özel hata gösterimleri için invalid olayını preventDefault ile birlikte dinleyin. Alanlar arası doğrulama, asenkron denetimler ve yerelleştirilmiş özel mesajlar için kullanın.
Sıkça Sorulan Sorular
“reportValidity ve setCustomValidity” dersi ücretsiz mi?
Evet — “reportValidity ve setCustomValidity” 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.
“reportValidity ve setCustomValidity” dersinde ne öğreneceğim?
Tarayıcı doğrulama arayüzünü tetikleyin ve özel hata iletileri belirleyin 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.
“reportValidity ve setCustomValidity” 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
- FormData API'si
- Constraint Validation API
- reportValidity ve setCustomValidity
- Form Sıfırlama Olayları ve Durum Yönetimi