Jquery Validation
jQuery’yi kim icad ettiyse Allahü Teala hidayet versin diye sık sık dua ediyorum. 10 sene önce patronum “table satırları arasında dolaşırken zemin rengi illa değişsin” diye zorlamasaydı Javascript’e hiç yaklaşmamaya karar vermiştim. Çünkü browserlar arasında (o zamanlar Netscape ve Internet Explorer popülerdi) aşırı bir uyuşmazlık vardı. Birinde çalışan diğerinde çalışmıyordu. Bu sorunlar belki hala var ama jQuery gibi framework’ler sayesinde bu sorunlarla uğraşmak zorunda kalmıyoruz.
Javascript web sitelerini dinamik hale getirmek için elimizdeki neredeyse tek aracımız (Flash’ı saymazsak yani). Bu aracı kullanmak normalde çok zor. Sayfadaki bir elemanı seçmek için document.getElementById(id) gibi uzun ve sıkıcı bir fonksiyonu var mesela. jQuery en basitinden bunu $(“#id”) şeklinde tutmamızı sağlıyor. Buradaki # seçicisi aynı CSS’deki gibi çalışıyor. Örneğin id’si eposta_adresi olan öğeyi tutmak için $(“#eposta_adresi”) dediğimiz gibi tüm paragraf (p) öğelerini tutmak istiyorsak $(“p”) diyebiliyoruz veya “baslik” şeklinde bir class içeren öğeleri tutmak istiyorsak $(“.baslik”) diyebiliyoruz.
jQuery’nin marifetlerinin yanında bu bahsettiğim belki de en basiti. Çok basit komutlarla bir öğeyi (div, paragraf, image, table ne olursa) efektli bir şekilde gizleyip geri gösterebilirsiniz. Şu kadarcık bir kodla: $(“#secilen_oge_id”).toggle(“slow”);
jQuery bir umman, http://docs.jquery.com adresinde çok güzel örneklerle anlatılmış. jQuery’nin sınırı yok, zira hergün yeni bir plug-in yazılıyor. Bu yazının konusu aslında bu plug-in’lerden biri olan form doğrulama (validation) mekanizması idi.
Jquery’nin hemen her fonksiyonu JSON formatında bir konfigürasyon parametresi ile çalışır. Daha önce kullandığımız validation plug-in’i şöyle idi:
$("#Form").validate({
rules: {
baslik: {
required: true
},
eposta: {
required: true,
email: true,
}
}
});
Aslında gayet açık ve anlaşılabilir bir yapısı var. Pek çok projede seve seve kullandık. Fakat aşağıdaki linkteki jQuery plug-in’inde buna bile gerek kalmamış. Sadece ilgili form öğelerinin içerisine class=required ya da class=”required email” gibi class’lar vermek kafi. Bunu aktif hale getirecek Javascript kodu ise yukarıdakine benziyor ama konfigürasyon parametresi içermiyor. Sadece: $(“#Form”).validate();
Güzel değil mi?