Bir RIA Developer'in Dikkatini ÇekenlerMerak etmek öğrenmeye başlamaktır…

jQuery nin çok işe yarar bir plugin inden bahsedeceğim. Formları kontrol etmek doğru verinin girilip girilmediğini denetlemek çok büyük sıkıntı benim için. Hazırladığım bir formun kontrolü için araştırma yaparken karşıma çıkan bu güzel plugin tüm sorunlarımı kafamdan atmama neden oldu

Hemen kullanımına geçiyorum. Öncelikle şu adresten indirelim. İndirdiğimiz zip dosyasının içindeki jquery.validate.min.js dosyasını kullanacağız. İsterseniz jquery.validate.js ya da jquery.validate.pack.js dosyasını da kullanabilirsiniz.

Önce bu kütüphaneyi sayfamıza ekleyelim.

<script type="text/javascript" src="jquery132.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>

Daha sonra sayfamız açıldığında hemen çalışmaya başlayacak olan validation kodlarını yazalım.

Kullanacağımız formun html kodları:

<form name="form1" id="form1">
<table border="1">
 <tr>
 <td>İsim</td>
 <td><input type="text" name="isim" id="isim" /></td>
 </tr>
 <tr>
 <td>Numara</td>
 <td><input type="text" name="numara" id="numara" /></td>
 </tr>
 <tr>
 <td>Email</td>
 <td><input type="text" name="email" id="email" /></td>
 </tr>
 <tr><td colspan="2" align="right"><input type="button" onclick="kontrolet()" value="Kontrol Et" /></td></tr>
</table>
</form>

Bu uygulamamızda formumuzun adı ve id si form1. Ayrıca formun içinde isim, numara ve email alanları bulunmakta.

<script type="text/javascript">
$(document).ready(function() {
$('#form1').validate({
rules: {
isim: { required: true, minlength:5 },
numara: { required: true, number:true },
email: { required: true, email: true }
},
messages: {
isim: { required: 'Lütfen bu alanı doldurunuz.',minlength:'5 karakterden daha az giremezsiniz.'  },
numara: { required: 'Bu alanı doldurmak zorundasınız.',number:'sadece numara girilebilir.' },
email: { required: 'Lütfen bu alanı doldurunuz.' , email: 'Lütfen geçerli bir email adresi giriniz.' }
}
});
});
</script>

Şimdi tüm bu kodlar ne işe yarıyor biraz ondan bahsedeyim. Döküman hazır olduğunda form1 nesnesi validation için yakalanıyor ve kontrol ediliyor required komutu ilgili alanı doldurmak zorunda olduğumuzu belirtiyor. Default değeri false. Bunun dışında number, minlength, maxlength, email gibi özelliklerde var. Bu kodları yazdırdıktan sonra eğer formumuz doğru doldurulmuşsa işlem yaptırmak istiyoruz. Bunun içinde şu kodları kullanacağız.

<script type="text/javascript">
function kontrolet()
{
sonuc = $('#form1').valid();
if(sonuc==true)    {
alert("Form başarıyla dolduruldu.")
}else{
alert("Lütfen gerekli alanları doldurunuz.");
}
}
</script>

Çalışmanın derli toplu haline buradan ulaşabilirsiniz.

Bu plugin hakkında daha çok bilgi için:
http://docs.jquery.com/Plugins/Validation
http://jquery.bassistance.de/validate/demo/