jQuery ile Form Kontrolü
6 Aralık 2008 |
7 Yorum
1 kez puan verildi, Ortalama: 5.00 (5 üzerinden)
Loading ...Konunun başlığından da anlaşılacağı üzere jQuery nedir ne değildir diye uzun uzun anlatmayacağım. Zaten bir framework kullanmaya karar verdiyseniz yada halen kullanmaktaysanız javascript nedir, CSS nedir, DHTML nedir, DOM nedir biliyorsunuzdur. Yine de bu saydıklarım içinde kendinizi yetersiz bulduğunuz veya halen bilmediğiniz birşey varsa bu yazının devamındakileri anlamayabilirsiniz. (Uzun uzun anlatmayacağım dedim ama yine de kısaca bazı şeylere değinmek lazım.)
Web2.0 ile birlikte javascriptin kıymeti daha da anlaşıldı. Kullanıcı ile anında etkileşime girmek, sayfalara çeşitli efektler vermek artık vazgeçilmez şeyler haline geldi. Javascript, css ve html bilgimiz üst seviyelerde bile olsa her yaptığımız işte/projede uzun uzun kodlar yazmaktan sıkılır hale geldik. Bu noktada framework denen, çok sık yaptığımız işleri daha kolay hale getiren ve bunun yanında yapılması uzun vakit ve pek çok satır kod gerektirecek bazı efektleri, etkileşimleri vs. daha çabuk ve kolay şekilde bizim kullanımımıza sunan hazır kütüphaneler oluştu. Bunlardan benim bildiklerim: DoJo, Prototype, Ext Js, mootools ve jQuery. Hepsinin iyi ve kötü yönleri sayfa sayfa internette tartışılıyor. Ancak framework kullanıyor olmak hiç Javascript bilmeden az çok birşeyler yapabilmek anlamına geliyor gibi gözüksede illaki bir noktada Javascript fonksiyonlarından veya nesnelerinden faydalanmanız gerekiyor.
Başlamadan önce, eğer jQuery ile ilgili bilginiz pek yoksa referans olması açısından aşağıdaki yazılara gözatmanızı tavsiye ederim:
jQuery Dökümantasyonu
jQuery dünyasına adım atıyoruz
jQuery ve Seçiciler
jQuery ve Css işlemleri
jQuery ve Olaylar
jQuery ve DOM işlemleri
jQuery ve AJAX işlemleri
jQuery ve Efekt işlemleri
jQuery ve JSON işlemleri
Gelelim asıl işimize. Malum web sitelerin olmazsa olmazı formlar. Kayıt formları, sipariş formları, bilgi formları... uzar gider bu liste. Fakat hemen hepsinin ortak yönü bazı bölümlerinin ziyaretçi tarafından boş bırakılmaması gerektiği veya sadece belirli kriterler içinde doldurulması gerektiği. En basitinden bir giriş formu şu şekilde olacaktır:
Yine bu formun boş bırakılmamasını sağlamak için yazılabilecek basit bir kod şu şekilde olabilir:
-
$(document).ready( function() {
-
$("#girisformu").submit(function() { // form submit edildiğinde....
-
if ($("#user").val()=='' || $("#pass").val()=='') { // eğer kullanıcı adı ve şifre boş ise...
-
alert("Tüm Alanları Doldurun!"); // uyarı mesajı ver
-
return false; // formun gönderilmesini durdur
-
}
-
});
-
});
Bu yöntemi kullanarak formdaki her alanı tek tek kontrol edebiliriz ancak bunu yapmak programcı için epey eziyet verici bir hal alabilir. İçinde 10-15 tane input alanı(radio, checkbox veya select) ve textarea olan ve üstelik, sadece bazı alanların boş bırakılmaması gerektiği bir form olduğunu düşünürseniz yazmanız gereken kodun ne kadar uzayabileceğini az çok tahmin edebilirsiniz.
Örneğin hazırladığınız bir formda sadece text tipindeki inputların doldurulması gerekiyorsa şöyle birşey işinizi görebilir:
-
$(document).ready( function() {
-
$("#girisformu").submit(function() {
-
$("input").each(function(){
-
if ($(this).attr("type")=='text' && $(this).val()=='') {
-
alert("Gerekli Alanları Doldurun!");
-
return false;
-
}
-
});
-
});
-
});
Yukarıdaki yöntemler bazen işimizi görse de her zaman kullanmak mümkün olmayacaktır. Genel amaçlı bir kullanım için kendi hazırlayacağımız bir form doğrulama sistemi, her işde/projede aynı kodları yazmaktan bizi kurtaracaktır.
Şimdilik sadece boş mu/dolu mu kontrolü yaptık. Elbette daha detaylı doğrulamalara ihtiyacımız olacak. Bu yüzden, önceden belirlediğimiz form elemanlarını(input, radio, textarea farketmeden) test edebilen bir kod hazırlamamız lazım. Buradaki anahtar nokta, jQuery(veya diğerleri) ile kontrol yapacaksak bir şekilde kontrol yapacağımız elemanı diğerlerinden ayırabilmemiz yani seçebilmemiz lazım. Bunun için genelde hep aynı yöntem ufak farklılıklarla uygulanır. Kimisi form elemanına ait id özelliğini, kimisi class özelliğini, kimisi name özelliğini denetler. Bunların hepsi doğrudur ancak ben accesskey özelliğini kullanmayı tercih ediyorum. Malum name, class ve id özellikleri farklı amaçla da kullanıldığı için bazen bizim doğrulama scriptimiz için kullanışsız olabilirler.
Örnek formumuz şu şekilde olsun:
Bu formdaki elemanların hepsine title ve accesskey özelliklerinin atandığını görüyorsunuz. title özelliğinin değeri(içeriği) kullanıcıya gösterilecek uyarı mesajları için, accesskey özelliğinin değeri ise gerekli denetimleri yapabilmemiz için kullanılılacak. Burada ben kendime göre bazı kısaltmalar kullandım. Mesea r=gerekli, a=alfanümerik, n=nümerik, w=harf, e=email, min:X=en az X karakter uzunluğunda,, max:X=en fazla X karakter uzunluğunda anlamında tanımladım. Siz bunlara ekleme yapabilir veya kendinize göre değiştirebilirsiniz. Tabiki buna göre hazırlayacağınız jQuery scripti de düzenlenmelidir.
Gelelim bunları yorumlayacak scripte. İşlevi şu şeklide olacak, ilk önce form nesnesinin içindeki tüm form elemanlarını alacağız. Daha sonra accesskey özelliği olanları denetleyip, accesskeyde tanımlanmış işleme göre gerekli kontrolleri yapacağız.
-
$(document).ready( function() {
-
$("#register").submit(function() {
-
$.stop=false;
-
var emailfilter=new RegExp("^([a-z0-9_\.\-])+\@([a-z0-9\-])+\.([a-z]{2,4})(\.([a-z]{2,4}))?$","i"); // email doğrulamasında kullanılacak regExp deseni
-
var inputs=$("#register>:input"); // $("form> *"); şeklinde veya $(":input"); şeklinde de seçilebilir
-
if (inputs.length<1) alert("Formda eleman yok, neyi denetleyelim?!");
-
else {
-
var message="";
-
-
inputs.each(function(){
-
var inputVal=$.trim($(this).val()); // form elamanın değeri
-
var inputTitle=$.trim($(this).attr("title")); // form elemanın title değeri
-
var checkList=$.unique($.trim($(this).attr("accesskey")).split(",")); // accesskey içindeki değerleri parçalayıp, array yapalım
-
-
if (checkList.length>0) {
-
for (i=0;i<checkList.length;i++) { // accesskeyde tanımlanmış tüm direktifleri test etmeye başlayalım
-
var value=$.trim(checkList[i]);
-
if (value.search(":")!=-1) { // max ve min tanımlaması var...
-
var limits=value.split(":");
-
var type=limits[0]; // max veya min
-
var len=limits[1]; // X
-
if (type=='max'&&inputVal.length>len) {
-
if (inputTitle!="") message=message+inputTitle+" alanına en fazla "+len+" karekter girilebilir!\n";
-
}
-
if (type=='min'&&inputVal.length<len) {
-
if (inputTitle!="") message=message+inputTitle+" alanına en az "+len+" karekter girilmelidir!\n";
-
}
-
}
-
else {
-
if (value=="r" && (inputVal==""||inputVal==0)) { // doldurulması zorunlu
-
if (inputTitle!="") message=message+inputTitle+" alanının doldurulması zorunludur!\n";
-
}
-
-
if(inputVal!=""&&inputVal!=0&&value!="r") { // doldurulması zorunlu değil ancak belli kriterlere göre doldurulmalı
-
if (value=="e" && emailfilter.test(inputVal)==false) { // email doğrulaması
-
if (inputTitle!="") message=message+inputTitle+" alanına girilen e-mail adresi geçerli değil!\n";
-
}
-
if (value=="w" && inputVal.search(/^[a-z]+$/ig|>)==-1) { // harf doğrulaması
-
if (inputTitle!="") message=message+inputTitle+" alanına sadece harf girilmelidir!\n";
-
}
-
if (value=="n" && inputVal.search(/^[0-9]+$/ig|>)==-1) { // rakam doğrulaması
-
if (inputTitle!="") message=message+inputTitle+" alanına sadece rakam girilmelidir!\n";
-
}
-
if (value=="a" && inputVal.search(/^\w+$/ig)==-1) { // alfanümerik doğrulama
-
if (inputTitle!="") message=message+inputTitle+" alanına sadece alfanümerik karakterler girilmelidir!\n";
-
}
-
}
-
}
-
} // for
-
} // if
-
});
-
-
if (message!="") alert(message); // hataları gösterelim
-
else $.stop=true;
-
}
-
return $.stop
-
});
-
});
Tüm kodları bir fonksiyon haline getirirseniz kullanması daha pratik olacaktır. Hatta jQuery'e eklenti olarak bile ekleyebilirsiniz. Tabiki bu kodların ufak tefek eksiklikleri (mesela radio input için bu kodlar düzgün çalışmayacaktır) olabilir yada daha performanslı çalışmasını sağlayacak iyileştirmeler yapılabilir. Bu halini uzun uzun test edecek vaktim olmasa da işin mantığını kavramanıza yeteceğini düşünüyorum.
Peki hazırı varken kendimiz neden oturup bunları hazırlayalım. Hazıra dağ dayanmaz diye bir laf vardır... Belki ufak tefek işlerde hazır olanları kullanmak size yeter ancak büyük çaplı işlerde çalışacaksınız veya biraz karmaşık işlemler yapacaksanız mutlaka kendiniz buna benzer kodlamalar yapmak durumunda kalıyorsunuz. Çünkü hazır olarak kullandığınız kütüphanenin ne kadar doğru kodlandığı, kodlanırken nelerin göz önüne alındığı ve performansın ne kadar düşünüldüğü, ne kadar zaman önce kodlandığı gibi etmenler çok önem arz edebiliyor. Herşey bir tarafa kulladığınız dilin/frameworkun yeneklerini gerçekten öğrenmek istiyorsanız, olabildiğinice kendi kodlarınızı yazmanızı öneririm.
Kolay gelsin.
Yazdır
| 5,010 Görüntülenme | Kategori: HTML & Javascript & Ajax | 
Geri İzleme
Etiketler: javascript, jquery, form kontrolü, dhtml, ajax, dom, frameworkBenzer Yazılar
Yorum Yap
XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
$("input[name='telefon']"); // name değeri telefon olmayan tüm inputlar seçilir $("input[value!=''][title!='']"); // title ve value değeri boş olmayan tüm inputlar seçilir $("input[value!='']:last"); // value değeri boş olmayan en son input seçilir