JAVASCRİPT KÜTÜPHANELERİNİN FORMLARDA KULLANIMI VE VALIDANGUAGE KÜTÜPHANESİ
JavaScript Kütüphanelerinin Formlarda Kullanımı
Validanguage Kütüphanesi
Sipariş alma, ziyaretçi defteri girişleri gibi form bilgilerindeki eksiklerin, büyük problemler çıkaracağı durumları önlemek için formlarda bir takım doğrulama (validation) kodları kullanmaktayız. Validanguage kalıtıma dayalı (İnheritance-driven), mevcut en zengin özelliklere sahip, kullanımı kolay JavaScript doğrulama çerçevelerine sahip, açık kaynak bir doğrulama kütüphanesidir. Bahsettiğimiz tipteki belgeleri ve onların işlevselliğini arttırmak için tasarlanmıştır. Internet Explorer 6 veya üzeri, Firefox, Safari, Opera, Konqueror ve Chrome gibi tüm temel tarayıcılar tarafından desteklenir. Önceden yapılandırılmış required, minlength, maxlength gibi doğrulama fonksiyonları onblur, onsubmit, onchange gibi olay işleyicilerinde kullanılarak kolayca bu kütüphaneden faydalanabiliriz.
Bu kütüphaneyi kullanabilmek için öncelikle validanguage kütüphanesini indirip ( Bu linkten indirebilirsiniz: Validanguage Kütüphanesi ), internet sunucusuna yükledikten sonra sayfanın <head> bölümüne bu satırı eklememiz gerekiyor :
<script type="text/javascript" src="/path/to/validanguage.js"></script>
Bu işlemi gerçekleştirdikten sonra internet sayfasında doğrulayacağımız tüm form elemanlarının birer "id" özelliğinin olup olmadığına bakıyoruz. Bu "id" özelliğini, doğrulamak istediğimiz form elemanlarıyla doğrulama fonksiyonları arası ilişkilendirmeyi sağlamak için kullanacağız. Bu yüzden seçeceğimiz her "id" benzersiz olmalıdır.
Şimdi bu anlattıklarımızı basit bir örnek üzerinden görelim :
<script type="text/javascript">
validanguage.el.newDateField = {
errorMsg: 'Lütfen dogru bir tarih giriniz! ',
validations: [
{
name: 'validateRequired'
},
{
name: 'validateDate'
}
]
}
validanguage.addValidation( 'newDateField', ['onsubmit', 'onblur'], ['validateRequired', 'validateDate'] );
</script>
Örneğimizde validanguage kütüphanesinin addValidation() fonksiyonu üzerinde çalıştık. Bu fonksiyon ile bir form alanı için yeni bir doğrulama (validation) ekleyebileceğimiz gibi daha önce silinmiş bir doğrulamayı yeniden aktif edebiliriz. Yeni bir doğrulama eklerken, ilk olarak validanguage.el.newDateField nesnesinde gerekli ayrıntıları ekledik. Fonksiyonumuzdaki 'newDateField' parametresi doğrulama alanının "id" özelliği, ['onsubmit','onblur'] doğrulama yapacağımız form alanının hangi olay işleyicileriyle kontrol edilebileceğini, ['validateRequired','validateDate'] parametresi ise validanguage.el.formField nesnesinde listelenmiş doğrulamalardan hangilerinin uygulanacağını göstermektedir. Fonksiyonun 3. parametresi validanguage.el.formField nesnesinde tanımlanmış doğrulamaları uygulayacağı için birebir eşleştirileceklerinden, tam isimleriyle yazılmaları gerekmektedir. Eğer tüm doğrulamaları, belirlediğimiz form alanı için uygulamak istiyorsak aşağıdaki kod satırındaki gibi bu parametreyi '*' olarak değiştirmemiz yeterli olacaktır.
validanguage.addValidation( 'newDateField', ['onsubmit', 'onblur'], '*' );
Sıra geldi bu javascript fonksiyonunu form elemanları için çağırmaya ve form elemanını doğrulamaya. Fonksiyonumuzu aşağıdaki kodda göreceğimiz gibi, olay işleyicileri içinde çağırıp işlemimizi kolayca halledebiliriz.
<form>
Required Field: <input type='text' id='idText'/>
<input type='button'
onclick="idText.validanguage.validateNumeric() "
value='Check Field' />
</form>
Örnekte görüldüğü gibi formda doğrulamak istediğimiz eleman için validateNumeric() fonksiyonunu çağırdık ve kütüphanenin bu fonksiyonuyla, ilgili yazı alanının sadece sayısal değerler alabilen bir alan olmasını sağladık.
- validanguage.validateCreditCard : Geçerli kredi kartı numarası sağlar.
- validanguage.validateDate : Girilen tarihin istenilen formatta olmasını sağlar.
- validanguage.validateTimestamp : Geçerli zaman damgası sağlar.
- validanguage.validateEmail : Geçerli e-posta adresi girişini sağlar.
- validanguage.validateIP : Geçerli IPv4 adresinin girişini sağlar.
- validanguage.validateNumeric : Girilen değerin sayısal olmasını sağlar.
- validanguage.validateURL : Doğru formatta URL girişini sağlar.
