Tarayıcılar, kullanıcıların verileri doğru biçimde girip girmediklerini kontrol etmek için yerleşik doğrulama özelliklerine sahiptir. Doğru öğe ve özellikleri kullanarak bu özellikleri etkinleştirebilirsiniz. Buna ek olarak, form doğrulamayı CSS ve JavaScript ile iyileştirebilirsiniz.
Formlarınızı neden doğrulamalısınız?
Önceki modülde, kullanıcıların formlara tekrar tekrar bilgi girmekten kaçınmasına nasıl yardımcı olacağınızı öğrendiniz. Kullanıcıların geçerli verileri girmelerine nasıl yardımcı olabilirsiniz?
Hangi alanların zorunlu olduğunu veya bu alanların kısıtlamalarını bilmeden bir formu doldurmak çok can sıkıcı. Örneğin, bir kullanıcı adı girip form gönderirsiniz. Ancak bu durumda kullanıcı adlarının en az sekiz karakterden oluşması gerektiğini öğrenirsiniz.
Doğrulama kuralları tanımlayıp kuralları paylaşarak kullanıcılara bu konuda yardımcı olabilirsiniz.
Kullanıcıların zorunlu alanları yanlışlıkla doldurmasına yardımcı olun
Formlarınıza girilen veriler için doğru biçimi ve kısıtlamaları belirtmek üzere HTML kullanabilirsiniz. Hangi alanların zorunlu olduğunu da 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ği olur.
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
type="email" gibi diğer birçok türü de kullanabileceğinizi öğrendiniz.
Gerekli bir e-posta adresine (<input>) göz atalım.
Bu formu veri girmeden göndermeyi deneyin. Önceki demodan herhangi bir fark var mıydı? Şimdi adınızı e-posta alanına girin ve göndermeyi deneyin. Farklı bir hata mesajı görüyorsunuz. Bu nasıl mümkün oluyor? Girdiğiniz değer geçerli bir e-posta adresi olmadığı için farklı bir mesaj alırsınız.
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ı olma
Bir alanı zorunlu kılmayı öğrendiniz. Tarayıcıya, kullanıcının form alanı için en az sekiz karakter girmesi gerektiğini nasıl söylersiniz?
Demoyu deneyin. Değişikliğinizden sonra, sekiz karakterden kısa bir giriş yaparsanız formu gönderemezsiniz.
<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 işlevini 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 öğeye bağlayın.
Bunu yapmak için formun id değerine sahip öğeye bir aria-describedby özelliği ekleyin.
Desen özelliği
Bazen daha gelişmiş doğrulama kuralları tanımlamak isteyebilirsiniz.
Yine, bir HTML özelliğini kullanabilirsiniz.
Bu değere pattern denir ve değer olarak normal ifade tanımlayabilirsiniz.
<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ının en az iki, en fazla yirmi karakter girmesi gerekir.
pattern özelliğini 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 denetimlerinin stilini doğrulama durumuna göre de ekleyebilseydiniz harika olmaz mıydı? Bu, CSS ile mümkündür.
Zorunlu form alanının stilini ayarlama
Kullanıcıya formunuzla etkileşimde bulunmadan önce bir alanın zorunlu olduğunu gösterin.
required alanlarının stilini, :required CSS sözde sınıfıyla belirleyebilirsiniz.
input:required {
border: 2px solid;
}
Geçersiz form kontrollerinin stili
Kullanıcının girdiği veriler geçersizse ne olacağını hatırlıyor musunuz? Form denetimine ekli hata mesajı görünür. Bu durumda öğenin görünümünü uyarlamak mükemmel olmaz mıydı?
Geçersiz form kontrollerine stil eklemek için :invalid sözde sınıfı kullanabilirsiniz.
Buna ek olarak, geçerli form öğelerinin stilini belirlemek 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 hakkındaki modülde, formlara stil uygulama 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'yi kullanabilirsiniz.
Anlamlı hata mesajları verin
Daha önce hata mesajlarının her tarayıcıda aynı olmadığını öğrenmiştiniz. Aynı mesajı herkese nasıl gösterebilirsiniz?
Bunu yapmak için Constraint Validation API'nin setCustomValidity() yöntemini kullanın.
Şimdi bunun nasıl olduğuna bakalı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 öğenin invalid etkinliğini dinleyin.
Burada setCustomValidity() ile iletiyi 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ını tekrar görürsünüz.
Constraint Validation API ile yapabileceğiniz daha pek çok şey var. Sonraki bir modülde JavaScript ile doğrulama kullanımına ilişkin ayrıntılı bir açıklama bulabilirsiniz.
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 ekleyebilir ve bir kullanıcı form alanından ayrıldığında girişi hemen doğrulayabilirsiniz.
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.
Yakında eklenecek modülde JavaScript ile gerçek zamanlı doğrulama uygulama hakkında daha fazla bilgi edinin.
Öğrendiklerinizi sınayın
Formları doğrulamayla ilgili bilginizi test edin
Form kontrollerini zorunlu hale getirmek için hangi özelliği kullanıyorsunuz?
requiredneededessentialobligatoryKendi hata mesajlarınızı tanımlamanız mümkün mü?
message HTML özelliğiyle.:invalid CSS sözde öğesi ile.type="email" ve required özelliği içeren bir <input> gönderilebilir: