Tarayıcılar, kullanıcıların verileri doğru biçimde girip girmediğini kontrol eden yerleşik doğrulama özelliklerine sahiptir. Doğru öğeleri ve nitelikleri kullanarak bu özellikleri etkinleştirebilirsiniz. Ayrıca, CSS ve JavaScript ile form doğrulamayı geliştirebilirsiniz.
Formlarınızı neden doğrulamalısınız?
Önceki modülde, kullanıcılarınızın sürekli olarak uğraşmaktan kaçınmasına bilgileri formlara tekrar girebilirsiniz. Kullanıcıların geçerli verileri girmelerine nasıl yardımcı olabilirsiniz?
Hangi alanların zorunlu olduğunu bilmeden form doldurmak sinir bozucudur, ya da bu alanların kısıtlamalarına bağlı kalmıyor. Örneğin, bir kullanıcı adı girer ve bir form gönderirsiniz. Bu şekilde, kullanıcı adlarının en az sekiz karakterden oluşması gerektiğini öğrenebilirsiniz.
Doğrulama kuralları tanımlayarak ve bunları ileterek kullanıcılara bu konuda yardımcı olabilirsiniz.
Kullanıcıların zorunlu alanları yanlışlıkla doldurmalarına yardımcı olun
Formlarınıza girilen veriler için doğru biçimi ve kısıtlamaları belirtmek üzere HTML kullanabilirsiniz. Ayrıca hangi alanların zorunlu olduğunu belirtmeniz gerekir.
Bu formu veri girmeden göndermeyi deneyin.
<input> ekinde, alanın zorunlu olduğunu belirten bir hata mesajı görüyor musunuz?
Bunun nedeni required özelliğidir.
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
type="email" gibi daha fazla tür kullanabileceğinizi zaten öğrendiniz.
Gerekli e-postalara (<input>) bakalım.
Bu formu veri girmeden göndermeyi deneyin. Önceki demoya göre herhangi bir fark var mı? Şimdi e-posta alanına adınızı girin ve göndermeyi deneyin. Farklı bir hata mesajı görüyorsunuz. Peki bu nasıl mümkün oluyor? Girdiğiniz değer geçerli bir e-posta adresi olmadığı için farklı bir mesaj alıyorsunuz.
required özelliği, tarayıcıya alanın zorunlu olduğunu bildirir.
Tarayıcı, girilen verilerin type biçimiyle eşleşip eşleşmediğini de test eder.
Örnekte gösterilen e-posta alanı yalnızca boş değilse ve girilen veriler geçerli bir e-posta adresiyse geçerlidir.
Kullanıcının doğru biçimi girmesine yardımcı olun
Bir alanı nasıl zorunlu hale getireceğinizi öğrendiniz. Tarayıcıya, kullanıcının form alanına en az sekiz karakter girmesi gerektiğini nasıl söylersiniz?
Demoyu deneyin. Yaptığınız değişiklik sonrasında, sekiz karakterden daha kısa bir bilgi girerseniz formu gönderememeniz gerekir.
<label for="password">Password (required)</label> <input required="" minlength="8" type="password" id="password" name="password">
Özelliğin adı: minlength.
Değeri 8 olarak ayarladığınızda, istediğiniz doğrulama kuralına sahip olursunuz.
Bunun tam tersini istiyorsanız maxlength değerini kullanın.
Doğrulama kurallarınızı iletme
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>
Tüm kullanıcıların doğrulama kurallarınızı anladığından emin olun.
Bunun için form kontrolünü, kuralları açıklayan bir öğeyle bağlayın.
Bunu yapmak için formun id ile birlikte öğeye bir aria-describedby özelliği ekleyin.
Desen özelliği
Bazen daha gelişmiş doğrulama kuralları tanımlamak isteyebilirsiniz.
Yine, bir HTML özelliği kullanabilirsiniz.
Adı pattern. Özetle, örneğin,
normal ifadeyi kullanın.
<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">
Burada yalnızca küçük harflere izin verilir; kullanıcı en az iki, yirmiden fazla karakter girmemelidir.
pattern bölümünü büyük harflere de izin verecek şekilde nasıl değiştirirsiniz?
Deneyin.
Doğru yanıt: pattern="[a-zA-Z]{2,20}".
Stil ekle
Artık HTML'de doğrulama eklemeyi öğrendiniz. Form kontrollerinin stilini doğrulama durumuna göre de ayarlasanız güzel olmaz mıydı? Bunu CSS'de yapabilirsiniz.
Zorunlu form alanının stilini belirleme
Kullanıcıya formunuzla etkileşime geçmeden önce bir alanın zorunlu olduğunu gösterin.
required alanlarını, :required CSS sözde sınıfıyla biçimlendirebilirsiniz.
input:required {
border: 2px solid;
}
Stil geçersiz form denetimleri
Kullanıcı tarafından girilen veriler geçersizse ne olduğunu hatırlıyor musunuz? Form denetimine eklenmiş hata mesajı görünür. Böyle bir durumda öğenin görünümünü uyarlamak harika olmaz mıydı?
:invalid sözde sınıfını kullanabilirsiniz
geçersiz form kontrollerine stil ekleyin.
Buna ek olarak, geçerli form öğelerinin stil özelliklerini ayarlamak için sözde :valid sınıfı da vardır.
Stillerinizi doğrulamaya göre uyarlamanın başka yolları da vardır. CSS ile ilgili modülde formların stil özelliklerini ayarlama hakkında daha fazla bilgi edineceksiniz.
JavaScript ile doğrulama
Formlarınızın doğrulanmasını daha da iyileştirmek için JavaScript Constraint Validation API (JavaScript Kısıtlama Doğrulama API'si).
Anlamlı hata mesajları sağlayın
Hata mesajlarının her tarayıcıda aynı olmadığını daha önce öğrenmiştiniz. Aynı mesajı herkese nasıl gösterebilirsiniz?
Bunu yapmak için
setCustomValidity()
yöntemidir.
Şimdi, bunun işleyiş şekline göz atalım.
const nameInput = document.querySelector('[name="name"]');
nameInput.addEventListener('invalid', () => {
nameInput.setCustomValidity('Please enter your name.');
});
Özel hata mesajını ayarlamak istediğiniz öğeyi sorgulayın.
Tanımladığınız öğenizin invalid etkinliğini dinleyin.
setCustomValidity() ile mesajı ayarladınız.
Bu örnekte, giriş geçersizse Please enter your name. mesajı gösterilmektedir.
Farklı tarayıcılarda demoyu açın, her yerde aynı mesajı görmeniz gerekir. Şimdi, JavaScript'i kaldırıp tekrar deneyin. Varsayılan hata mesajları tekrar gösterilir.
Constraint Validation API ile yapabileceğiniz daha pek çok şey var. Bu JavaScript ile doğrulamasını daha sonraki bir modülde inceleyeceğiz.
Gerçek zamanlı doğrulama nasıl yapılır?
Bir form kontrolünün onblur etkinliğini dinleyerek JavaScript'te gerçek zamanlı doğrulama ekleyebilirsiniz.
ve bir kullanıcı form alanından ayrıldığında girişi hemen doğrular.
Demodaki form alanını tıklayın,
"web" yazın ve sayfada başka bir yeri tıklayın.
Form alanının altında minlength için yerel hata mesajını görürsünüz.
Uygulama hakkında daha fazla bilgi JavaScript ile gerçek zamanlı doğrulama hakkında daha fazla bilgi edinin.
Öğrendiklerinizi sınayın
Formları doğrulama bilginizi test edin
Form kontrollerini zorunlu hale getirmek için hangi özelliği kullanıyorsunuz?
requiredneededessentialobligatoryKendi hata mesajlarınızı tanımlayabiliyor musunuz?
message HTML özelliğiyle.:invalid CSS sözde öğesiyle.type="email" ve required özelliğine sahip bir <input> gönderilebilir: