Çok 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><br />
<input name="ad" id="ad"><br />
<button type="submit">Gönder</button></p>
</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<br /> <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"/><br /> //Zorunlu telefon girişi<br />
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.
Kaynak : www.position-absolute.com |
12 Comments
hocam mukkemel bir şey bu ya işimi çok kolaylaştırdı sağolasın
download adresi sanırım artık çalışmıyor.
@kaya,linki güncelledim. Şimdi çalışır durumda.
Selamlar,
validate[custom[telephone]] dediğimde required demememe rağmen yine de sanki zorunluymuş gibi bana uyarı veriyor. Boş geçilirse bu uyarı vermemesi için ne yapmak gerek ?
validate[optional,custom[telephone]]
işi çözüyormuş…
Hayırlı günler bu script textarea larda çalışmıyor mu acaba?
Umut, eklenti textarea’larda da çalışıyor.
sanırım download linki çalışmıyor.
@pursaklar İndirme linki güncellendi.
Örnek uygulama linkini de güncelledim.
Ellerinize sağlık, bir form içerisinde birden fazla button için ayrı ayrı kontrol mümkünmüdür? misal yan yana biri üye giriş diğer ise üye kayıt formu ikiside farklı butonlarla kullanılıyor ama aynı form içerisindeler.