Tem
1

JQuery Form Kontrol

Bugün işyerimde ölece oturup düşünürken birden aklıma blog sitemde jquery ile bir tane bile yazımın olduğunu düşündüm. Ne duruyorum diyip bu konuyla alakalı ilk yazımı sizlerle paylaşayım dedim.

Jquery’ yi bir çok web yazılımcısı bilir çünkü ciddi manada hayatımızı tahmin edemeyeceğimiz şekilde kolaylaştırır. Yazımın devamındaki form kontrol mekanizmasında anlatacağım.

Jquery nin tam olarak ne olduğunu bilmeyen arkadaşlar için kısa bir açıklama yapalım.

JQuery Nedir?

JQuery, hem javaScript hem ajax hem de efekt kütüphanesi olarak kullanılabilen bir framework’dür. 2006 başında John Resig tarafından duyurulmuş ve hali hazırda 15 kişilik bir ekip tarafından gelişimi sürdürülmektedir. Açık kaynak bir framework olmasından dolayı üzerine bir çok eklenti yazılmış ve bu sayede de tüm dünyada kullanıcı kitlesi bir anda artmıştır.


www.jquery.com adresinden indirebileceğiniz jQuery, sıkıştırılmış ve sıkıştırılmamış olmak üzere iki farklı şekilde dağıtılmaktadır. Sıkıştırılmamış sürümü yaklaşık olarak 155 KB iken, sıkıştırılmış sürümü ise yaklaşık 24 KB. Kısacası dosya boyutları hem javaScript, hem ajax, hem de efekt kütüphanesi için yeterince hafif. Eğer ki jQuery’yi oluşturan kodlara bakmak ve kodlar üzerinde değişiklik yapmak gibi bir düşünceniz yoksa her zaman için sıkıştırılmış sürümünü indirmeniz önerilir. (Kaynak: Wikipedia)

Jquery Validation Engine

Bir formu, kullanıcı tarafından kontrol etmek istersek javascript ile baya bir kasmamız gerekebilir. Kasmadan kasıt uzun bir kod öbeği yazmamızdır. Haliyle web yazılımcısı için fazladan zaman kaybıdır. Benim yapmış olduğum son projelerde Jquery Form Validation kütüphanesini kullanmaya başadım. Gerçekten şunu gönül rahatlığı ile söyleyebilirim ki yazılımcı kimliğimle şu ana kadar karşılaşmış olduğum en iyi form validation kütüphanesi. Bunu yazan kişi gerçekten çok esnek, anlaşılır, kullanımı kolay ve sonradan dahada geliştirilebilir hale getirmiş.

Sistemle birlikte gelen kontrollesi sıralarsak;

  • Zorunlu alan
  • Cümle Uzunluk kısıtlaması
  • Max checkbox işaretleme kısıtlaması
  • Min checkbox işaretleme kısıtlaması
  • İki inputu karşılaştırıp aynı olup olmadığının kontrolü
  • Telefon numarası kontrolü
  • E-posta kontrolü
  • Tarih kontrolü
  • Sadece rakam  olma kontrolü
  • Özel karakterlerin kntrolü

Yukarıda bahsettiklerim sadece size otomatik şekilde gelenler. Peki biz kendi kontrollerimizi yazamazmıyız? Cevabı basit elbette.

ister kendi fonksiyonunuzu yazın isterseniz regular expression la kontrol edebilirsiniz. Yada ben otomatik kontrol olmasında kullanıcı gönder butonuna bassın o zaman kontrol yapsın isterseniz oda mümkün.

Otomatik kontrol için ;

<script>
$(document).ready(function() {
 $("#formID").validationEngine();
});
</script>

Yok ben bir butona tıklayınca kontrol yapsın istiyorsanız ;

<script>

$(document).ready(function() {

$("#buttonID").click(function(){

 if($("#formID").validationEngine({returnIsValid:true}))

{

 //Form bizim istediğimiz gibi ise yapılacaklar buraya yazılır

}

});

</script>

Aslına bakarsanız benim burada herşeyi anlatmam pek mümkün değil. Fakat kullanmanızı şiddetle tavsiye ederim.

Jquery Validation Engine Web Sitesi :

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Demo Sayfası :

http://www.position-relative.net/creation/formValidator/

İndirmek için :

http://www.position-relative.net/creation/formValidator/formValidator.zip

Herkese kasmadan, fazla kafa patlatmadan böyle güzel kütüphaneler bulmanızı dilerim 🙂

5 yorum bulunmaktadır - “JQuery Form Kontrol”

  • Yusuf Selçuk 29 Temmuz 2010, 00:05

    Sevgili arkadaşım bilmiyorum ne kadar alakadır ama benim ciddi ve basit olduğunu düşündüğüm bir sorunum var.

    bir Select menüsündeki seçilen değeri yine aynı fom üzerinde POST etmeden nasıl İnput içerisinde görüntüleye bileceğimi arıyorum yardımcı olursan sevinirim.

  • Enes Pekkaya 29 Temmuz 2010, 08:37

    Demiş olduğun üzere konuyla çok alakalı değil ama ben genede senin için basit bir kod parçasını paylaşacağım.

    function degistir(e)
    {
    document.getElementById(‘text1’).value = e.value;
    }
    <select name=”menu” id=”menu” onchange=”degistir(this)”>
    <option value=””>Seç</option>
    <option value=”Deneme1″>Deneme 1</option>
    <option value=”Deneme2″>Deneme 2</option>
    </select>
    <input type=”text” name=”text1″ id=”text1″ />

  • Harun 13 Aralık 2010, 21:55

    Enes bey Merhaba;

    Öncelikle paylaşımınız için teşekkür ederim.

    Şöyle bir sorum olacaktı. Popo-up pencerelerde açılan metinlerde Türkçe karakter sorunu yaşıyorum. Her ne kadar tüm charsetleri charset=”iso-8859-9″ yapsamda düzelmedi.

    Şimdiden cevaplarınız için teşekkür ediyor. Paylaşımlarınızın devamını diliyorum.

  • Enes Pekkaya 14 Aralık 2010, 09:33

    Harun Bey,

    Yazınızdan anladığım kadarı ile bu sorunu php’de yaşıyorsunuz.
    Türkçe karakter sorunun belli başlı bazı bir kaç tane sorunu bulunmaktadır. Bunların çözümü için dikkat etmeniz gereken bazı durumlar şunlardır;

    Açtığınız popup bir başka dosyadan geliyorsa sayfanın başına header(‘Content-Type: text/html; charset=iso-8859-9’); koymanız gerekir.

    Veritabanından gelen verilerin latin-5 olduğundan emin olmanız gerekmekte. Eğer verileriniz mesela utf-8 ise bunları iso-8859-9 e çevirmeniz gerekmekte. Bunun için iconv() fonksiyonunu kullanabilirsiniz.

    Dosyanızın karakter seti (Encoding) “ANSI” olmalıdır. Eğer değilse “ANSI”‘ye çevirmeniz gerekmekte.

    Bir başka husus ise şudur. Eğer siz popup’ı içine iframe gömüyorsanız ve bu iframe içinde şekline değil ise gene türkçe karakter sorunu yaşamanız muhtemel

    Siz yukarıdaki yazdıklarımı bir kontrol edin. Eğer gene sorununuz çözülmüyor ise çekinmeden yazabilirsiniz.

  • Sedat Kumcu 23 Nisan 2012, 22:03

    Teşekkürler, çok güzel bir tooltip örneği. iyi çalışmalar dilerim.

Yorum Yapın

 

Twitter'dan Takip Et! Twitter'dan Takip Et!

Etiketler

Son Yazılar

Son Yorumlar

Haftanın Özlü Sözü

Akıllı bir adam yalnız kendi tecrübelerinden, çok akıllı bir adam başkalarının da tecrübelerinden yararlanır. (Çin Atasözü)

Bağlantılar

Arşivler