HTML5 İle Kolay Form Doğrulama

HTML5 İle Kolay Form Doğrulama

Kullanıcıdan form yoluyla alınan bilgiler her zaman için sıkıntılıdır. Bazen kullanıcı girmesi gereken bilgileri istediğiniz formatta yazmaz mesela. Böyle durumlarda da genelde ya sunucu taraflı kontrol yaparız ya da form doğrulama(form valitadion) sınıflarından birini kullanırız. Her zaman için önce tarayıcı tarafında kontrol yapmak daha sağlıklıdır. Sonrasında yine isterseniz sunucu tarafında da kontrollerinizi yaparsınız. Önce tarayıcı tarafında kontrol yapmanın avantajı ise gereksiz isteklerden kaçınarak sunucuya daha az yük bindinmesini sağlamamızdır. Neyse doğrulama ile ilgili daha fazla şey yazıp girişi uzatmak istemiyorum. Bu yazımda form doğrulama sınıflarını kullanmadan sadece HTML5 ile gelen doğrulama özelliklerini kullanmayı göstereceğim.

HTML5 form doğrulama ile ilgili bilgileri birkaç farklı başlık altında yazacağım.

Bunlar;

  • Özel Input Tipleri
  • Doldurulması Zorunlu Alanlar
  • Inputları Limitlemek
  • Inputları CSS İle Stillendirmek
  • Tooltipler (Tam Türkçe karşılığı ne olur bilemedim açıkçası)
  • Form Doğrulamada RegEx Kullanımı

Canlı DemoKodları İndir

Özel Input Tipleri

HTML bildiğinizi varsayarak input terimini açıklamıyorum. HTML5 ile birlikte input nesnemize yeni tipler eklendi. Bu tipler aracılığıyla o inputa girilecek verinin türünü belirleyebiliyoruz. Mobil tarayıcılarda da klavye o inputun türüne göre geliyor. Bu da mobil cihazlarından sitemizi ziyaret eden kullanıcıların sitemizi daha kolay kullanmasını sağlıyor.

HTML5 ile birlikte gelen yeni input tipleri ise şunlar:

  • color
  • date
  • datetime
  • datetime-local
  • month
  • time
  • week
  • email
  • number
  • range
  • search
  • tel
  • url

Örnek kullanım:

 Not: Eğer tarayıcı HTML5 ile gelen yeni input tiplerini desteklemiyorsa inputunuz sıradan bir input gibi görünecektir.

Doldurulması Zorunlu Alanlar

Eğer bir form öğenizin mutlaka doldurulmasını istiyorsanız bu alana required özelliğini eklemeniz yeterli olacaktır.

Mesela aşağıdaki örnek satırda göreceğiniz üzere isim alanı doldurulmadan form gönderilmeyecektir.

Ya da bu örnekteki gibi checkbox’a required değeri eklerseniz sozlesme isimli checkbox işaretlenmeden formunuz gönderilmeyecektir.

Inputları Limitlemek

Kullanıcıdan parola ya da yaş değerini aldığınızı varsayalım. Örneğin parolanın minimum 6 karakter olmasını istiyor olabilirsiniz. Ya da yaş değerinin minimum 18 olmasını istiyor olabilirsiniz. Bu gibi durumlar için aşağıdaki örneklerdeki gibi kullanımlar işinizi görecektir.

Minimum 5 karakter veri girilmesi için:

Maksimum 15 karakter girilmesi için:

Minimum değerin 18 olması için:

Maksimum değerin 50 olması için:

Not: Bu alanlara required özelliği de eklerseniz hem minimum ve maksimum değerlerine uyulması hem de boş bırakılmaması sağlanacaktır.

Inputları CSS İle Şekillendirmek

Formdaki alanlarınızın kriterlerini girdiğinizde bu kriterlere uyduğunda ya da uymadığında nasıl görüneceğini de çok kolay bir şekilde CSS ile ayarlayabiliyorsunuz. CSS3 özelliklerini kullanarak inputlarınızın görünümünü istediğiniz şekilde değiştirebiliyorsunuz.

Ayarlayabileceğiniz durumlar ise aşağıdakiler:

  • :valid (geçerli)
  • :invalid (geçersiz)
  • :required (gerekli)
  • :optional (opsiyonel)
  • :in-range (belirtilen aralıkta)
  • :out-of-range (belirtilen aralığın dışında)
  • :read-only (salt okunur)

Örneğin seçili form öğesi için geçerli olduğu durumlarda yeşil, geçersiz olduğu durumlarda ise kırmızı bir çerçeve eklemek için aşağıdaki CSS kodlarını kullanabilirsiniz.

Tooltipler

Form öğelerinin nasıl doldurulacağıyla ilgili kullanıcıya bilgi vermek istiyorsanız bunu form öğesinin title parametresi yardımıyla yapabilirsiniz. Form doğrulamada hata oluştuğunda kullanıcıya title değerine yazdığınız metin gösterilecektir. Kullanımı ise aşağıdaki örnek kodda olduğu gibi basit.

Form Doğrulamada RegEx Kullanımı

HTML5 ile form doğrulama yaparken form öğesine girilecek veriyi RegEx desenleri yardımıyla katı bir süzgeçten geçirebilirsiniz.

Eğer RegEx desenleri yazmakta siz de benim gibi çok iyi değilseniz internetten RegEx kullanımıyla ilgili örnekleri inceleyerek RegEx konusunda kendinizi geliştirebilirsiniz. Yazamadığım bir RegEx deseni olduğunda internetten ufak bir arama yaparak kendime uygun RegEx desenini buluyorum.

Son

HTML5 form doğrulamayla ilgili paylaşabileceğim bilgiler bu kadar. Aşağıdaki Canlı Demo linkini kullanarak yukarıda bahsettiğim şeylerin nasıl çalıştığını görebilir veya Kodları İndir linkine tıklayarak örnek kodları indirebilirsiniz.

Canlı DemoKodları İndir

Yorum kısmından görüşlerinizi benimle paylaşmayı unutmayın. Farklı bir örnek paylaşımında görüşmek üzere.

E-posta listesine abone olarak yeni yazılarımdan anında haberdar olabilirsiniz.

Ahmet İşcan

Php Developer..

4 thoughts on “HTML5 İle Kolay Form Doğrulama

  1. html5 ile eskisine göre çok kod yazılarak yapılan input düzenlemeleri şimdi çok daha kolay hale gelmiş durumda, bilgi için teşekkürler.

  2. iyi gunler size bir sorum olacak requedi ben giriş panelinde kullanıyorum ancak iki tane button oldugundan ikiside requedi tetikliyor belirlediğimiz buttonna atama yapamıyormuyuz.

    1. Required ile butona değil de forma bağlı koşullandırma yapmış oluyoruz. İki buton farklı veriler gönderiyorsa imkan varsa formları ayırmak aklıma gelen ilk çözüm. Diğer türlü kendiniz bir doğrulama sistemi yazmalı ya da js kütüphanelerinden birini kullanmalısınız gibi geliyor bana. Yine de form doğrulama konusunda 1 form içerisinde 2 submit butonu hiç kullanmadığımdan kesin bir şey söyleyemiyorum.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir