November 8th, 2009 
admin Çeşitli form doğrulama aracı kullanmama rağmen. Bi’türlü aradığım aracı bulamamıştım. Bu jquery eklentisi; bu arayışa son verdi. Eklenti’nin öne çıkan özellikleri;
- Hata ve uyarı görüntüleme yöntemi çok şık. Çoğru zaman dar form alanlarına uyarı eklendiğinde formun görüntüsü bozuluyordu. Bu eklenti uyarı ve hataların görüntülenmesinde “position:absolute” değeri kullandığı için. Bir hata verdiğinde formun hiçbir yerinde kayma veya bozulma olmuyor.
- İlgili form elemanının doğrulama seçeneklerini elemanın “class” özelliğine ekliyorsunuz. Bi’kaç eklentide olduğu gibi tüm doğrulama kodlarını ayrı bir yerde toplamak pek kullanışlı olmuyor.
- Jquery eklentisi.
Bir de kötü yanı var o da doğrulamak istediğiniz form elemanına “id” değeri verme zorunluluğu.
Örnek Uygulama | Örnek Uygulamayı İndir
Nasıl kullanılır?
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine-tr.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.validationEngine.css">
<script type="text/javascript">
$("document").ready(function(){
$("#form").validationEngine();
})
</script>
<style type="text/css">
label{display:block};
</style>
</head>
<body>
<h1>Jquery Validation Engine Eklentisi ile Form doğrulamak<h1>
<form id="form" method="post" action="#">
<label>Ad:</label>
<input name="ad" id="ad">
<button type="submit">Gönder</button>
</form>
</body>
</html>
Özetlemek gerekirse. Önce jquery.js,validationEngine.js,validationEngine-tr.js ve validationEngine.css scriptlerini sayfaya çağırıyoruz. Sonra jquery’nin “document.ready” olayına $(“#formid”).validationEngine(); kodu ile formumuzu doğrulamasını istiyoruz. Doğrulanacak elemana gelince onun “class” özelliğine “validate” cümlesi içinde köşeli parantezler arasına doğrulama seçeneğini/seçeneklerini koyuyoruz.
Doğrulama seçenekleri
required: Doldurumlası zorunlu alanlar için
length[0,100] : Alana girilen değerin uzunluğunu kontrol etmek için. Örnekte:0 ile 100 arası.
maxCheckbox[7] : Checkbox grubunda Maksimim seçilebilecek Checkbox sayısı.
minCheckbox[7] : Checkbox grubunda Minimum seçilmesi gereken Checkbox sayısı.
confirm[diger_alan_id] : İki alanı birbirine eşleştirmek için. Örneğin Şifre ve Şifre tekrar alanları
telephone : Telefon numarası.
email : Eposta adresi.
onlyNumber : Sadece numaralar.
noSpecialCaracters : Özel karakterlere izin vermeme.
onlyLetter : Sadece harfler.
exemptString : Muaf metin.
date : Tarih doğrulamak için varsayılan olarak (YYYY-AA-GG) deseni.
Birkaç örnek kullanım daha
<input name="eposta" id="eposta"/> // Email adresi doğrular <input name="soyad" id="soyad"/> // 1 ile 3 arası karakter için izin verir.
Aralarına virgül (,) koyarak tek inputa istediğimiz kadar doğrulama seçeneği uygulayabiliriz. Örn:
<input name="telefon" id="telefon"/> //Zorunlu telefon girişi
Formu ajax ile göndermek isterseniz document ready’deki doğrulama kodunu şu şekil kullanmalısınız:
$("#giris").validationEngine({
unbindEngine:false,
success: function(){this.submit = false; //ajax kodları...
}});
Örnek Uygulama | Örnek Uygulamayı İndir
Not: Örnek uygulama içinde çevirdiğim “jquery.validationEngine-tr.js” dosyasında çeviri hataları veya eksiklikler olabilir.
Posted in 
