Javascript kütüphanesi olan jQuery'nin dördüncü yılında yen bir sürümü yayınlandı. Dördüncü yılında 1.4 sürümü yayınlandı. Yeni sürüm ile yine birçok özellik geliştirilmiş durumda. jQuery'nin yeni versiyonunu (minified) buradan ve (regular) buradan indirebilir ve kullanmaya başlayabilirsiniz. Ayrıca yeni sürüm ile ilgili gelişmeleri, yenilikleri jQuery'nin bu sürüm için hazırlamış olduğu sayfadan da takip edebilirsiniz.

Jquery ile form kontrolü yapmak

Kategori Genel, jQuery Çekirdek Yapısı (jQuery Core) — cocum @ 6:24 pm

Her programcinin olmazsa olmazlarindan biri forum kontrolleridir. Forma bilgi dogru girildi diye kontrol etmek ister. Iste form kontrolü için jquery de bir kaç tane seçenek var . Ama en hosuma gideni sizinle paylasmak istedim

Hem kullanimi çok basit hemde islev olarak çok genis , ben biraz kodlada oynarak daha hos hale getirdim

Simdi Öncelikle kullandigimiz plugin jquery.validate yi ve jquery indirin. Yanliz yüklerken noktalar silindi onlari linklere bakarak güncelleyin.

Metin olarak gosterKodu kopyalaYazdir?

1. <script type="text/javascript" src="jquery-1.2.6.pack.js"></script> 
2. <script type="text/javascript" src="jquery.validate.js"></script> 

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

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

Indirdikten sonra iste kodumuz tüm hali

Metin olarak gosterKodu kopyalaYazdir?

1. &lt;html&gt; 
2. &lt;head&gt; 
3. <script type="text/javascript" src="jquery-1.2.6.pack.js"></script> 
4. <script type="text/javascript" src="jquery.validate.js"></script> 
5. &lt;script type="text/javascript"&gt; 
6. $(document).ready(function() { 
7. $('#ziyaretciformu').validate({ 
8. rules: { 
9. ad: { required: true }, 
10. ceptelefon: { required: true, number: true }, 
11. email: { required: true, email: true }, 
12. gorus: { required: true } 
13. }, 
14. messages: { 
15. ad: { required: 'Ad Soyad Bos Brakmayin' }, 
16. ceptelefon: { required: 'Cep Telefonunu Bos Birakmayin', number: 'Lütfen sadece sayi giriniz' }, 
17. email: { required: 'E-Posta Adresinizi Bos Birakmayin', email: 'E-Posta Adresinizi yanlis girdiniz' }, 
18. gorus: { required: 'Görüs Kismini Bos Birakmayin' } 
19. } 
20. }); 
21. }); 
22. &lt;/script&gt; 
23. &lt;style type="text/css"&gt; 
24. label.error 
25. { 
26. color: red; 
27. font-size: 10px; 
28. white-space: pre; 
29. float: left; 
30. } 
31. div.yazi 
32. { 
33. width:200px; 
34. font-family:Verdana; 
35. font-size:12px; 
36. color:blue; 
37. float:left; 
38.  
39. } 
40. div.alan 
41. { 
42.  
43. height:60px; 
44. } 
45. &lt;/style&gt; 
46.  
47. &lt;/head&gt; 
48. &lt;body&gt; 
49. <form method="POST" action="?" id="ziyaretciformu"> 
50. <div class="yazi">Adiniz Soyadiniz</div><div class="alan"><input type="text" name="ad" ></div> 
51. <div class="yazi">Mail Adresiniz</div><div class="alan"><input type="text" name="email"></div> 
52. <div class="yazi">Cep Telefonu</div><div class="alan"><input type="text" name="ceptelefon"></div> 
53. <div class="yazi">Görüs</div><div class="alan"><textarea name="gorus"></textarea></div> 
54. <div class="alan"><input type="submit" value="Gönder"></div> 
55. </form> 
56. &lt;/body&gt; 
57. &lt;/html&gt; 

 

&lt;html&gt;

&lt;head&gt;

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

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

&lt;script type="text/javascript"&gt;

$(document).ready(function() {

$('#ziyaretciformu').validate({

rules: {

ad: { required: true },

ceptelefon: { required: true, number: true },

email: { required: true, email: true },

gorus: { required: true }

},

messages: {

ad: { required: 'Ad Soyad Bos Brakmayin' },

ceptelefon: { required: 'Cep Telefonunu Bos Birakmayin', number: 'Lütfen sadece sayi giriniz' },

email: { required: 'E-Posta Adresinizi Bos Birakmayin', email: 'E-Posta Adresinizi yanlis girdiniz' },

gorus: { required: 'Görüs Kismini Bos Birakmayin' }

}

});

});

&lt;/script&gt;

&lt;style type="text/css"&gt;

label.error

{

color: red;

font-size: 10px;

white-space: pre;

float: left;

}

div.yazi

{

width:200px;

font-family:Verdana;

font-size:12px;

color:blue;

float:left;

 

}

div.alan

{

 

height:60px;

}

&lt;/style&gt;

 

&lt;/head&gt;

&lt;body&gt;

<form method="POST" action="?" id="ziyaretciformu">

<div class="yazi">Adiniz Soyadiniz</div><div class="alan"><input type="text" name="ad" ></div>

<div class="yazi">Mail Adresiniz</div><div class="alan"><input type="text" name="email"></div>

<div class="yazi">Cep Telefonu</div><div class="alan"><input type="text" name="ceptelefon"></div>

<div class="yazi">Görüs</div><div class="alan"><textarea name="gorus"></textarea></div>

<div class="alan"><input type="submit" value="Gönder"></div>

</form>

&lt;/body&gt;

&lt;/html&gt;

simdi nasil çalistigini açikliycam

öncelikle jquery ve validate kütüphanelerini çekiyoruz

Çalisma mantigi

safya yüklendiginde

Metin olarak gosterKodu kopyalaYazdir?

1. $(document).ready(function() { 

 

$(document).ready(function() {

id’si ziyaretciformu olan formu seçiyoruz

Metin olarak gosterKodu kopyalaYazdir?

1. $('#ziyaretciformu').validate({ 

 

$('#ziyaretciformu').validate({

sonra yapmamiz gerek formun isimlerine ne kontrolü yapmak istedigimizi söylemek

required: true dersek bosmu dolumu diye kontrol eder

required: true, number: true dersek bosmu ve sayimi siye kontrol eder

email: true dersek mail kontolü yapar

dikkat etmeniz gereken kisim input taglarinin isimlerini yani name=”ad” kisimlarini aynen burdada yazmak

kontrol parametreleri jquery.validate dosyasinin içinde liste halinde var

Metin olarak gosterKodu kopyalaYazdir?

1. rules: { 
2. ad: { required: true }, 
3. ceptelefon: { required: true, number: true }, 
4. email: { required: true, email: true }, 
5. gorus: { required: true } 
6. }, 

rules: {

ad: { required: true },

ceptelefon: { required: true, number: true },

email: { required: true, email: true },

gorus: { required: true }

},

messages yani mesajlar kismi ise hata verdiginde ney yazmasini gerektigini söylüyor

Metin olarak gosterKodu kopyalaYazdir?

1. messages: { 
2. ad: { required: 'Ad Soyad Bos Brakmayin' }, 
3. ceptelefon: { required: 'Cep Telefonunu Bos Birakmayin', number: 'Lütfen sadece sayi giriniz' }, 
4. email: { required: 'E-Posta Adresinizi Bos Birakmayin', email: 'E-Posta Adresinizi yanlis girdiniz' }, 
5. gorus: { required: 'Görüs Kismini Bos Birakmayin' } 
6. } 

messages: {

ad: { required: 'Ad Soyad Bos Brakmayin' },

ceptelefon: { required: 'Cep Telefonunu Bos Birakmayin', number: 'Lütfen sadece sayi giriniz' },

email: { required: 'E-Posta Adresinizi Bos Birakmayin', email: 'E-Posta Adresinizi yanlis girdiniz' },

gorus: { required: 'Görüs Kismini Bos Birakmayin' }

}

label.error kismi ise hata yazisinin css si istediginiz gibi degistebilirsiniz

Metin olarak gosterKodu kopyalaYazdir?

1. label.error 
2. { 
3. color: red; 
4. font-size: 10px; 
5. white-space: pre; 
6. float: left; 
7. } 

label.error

{

color: red;

font-size: 10px;

white-space: pre;

float: left;

}

form kisminda ise dikkat etmeniz gereken formun id’si ve inputlarin isimleri

çünkü jquery ile seçerken formun id sine göre seçiyor

bosmu dolumu diye kontrol ederken inputlarin isimlerine yani name=”" kisimlarina bakiyor

Metin olarak gosterKodu kopyalaYazdir?

1. <form method="POST" action="?" id="ziyaretciformu"> 
2. <div class="yazi">Adiniz Soyadiniz</div><div class="alan"><input type="text" name="ad" ></div> 
3. <div class="yazi">Mail Adresiniz</div><div class="alan"><input type="text" name="email"></div> 
4. <div class="yazi">Cep Telefonu</div><div class="alan"><input type="text" name="ceptelefon"></div> 
5. <div class="yazi">Görüs</div><div class="alan"><textarea name="gorus"></textarea></div> 
6. <div class="alan"><input type="submit" value="Gönder"></div> 
7. </form> 

<form method="POST" action="?" id="ziyaretciformu">

<div class="yazi">Adiniz Soyadiniz</div><div class="alan"><input type="text" name="ad" ></div>

<div class="yazi">Mail Adresiniz</div><div class="alan"><input type="text" name="email"></div>

<div class="yazi">Cep Telefonu</div><div class="alan"><input type="text" name="ceptelefon"></div>

<div class="yazi">Görüs</div><div class="alan"><textarea name="gorus"></textarea></div>

<div class="alan"><input type="submit" value="Gönder"></div>

</form>

hepsi bu kadar

cappatcha için ise tavsiyem server tabanli kontrol etmeniz

umarim faydali olmustur

Kaynak:jQueryturk

jQuery’nin işlerimizi daha hızlı ve kolay yapabilmemiz için bizlere sağladığı bir çok özellik arasında biri vardır ki tartışılmaz bir haldedir. OOP ile alakadar olanların daha çabuk kavraya bileceği zincirleme yapısı.

Bu yapı ile bir element üzerinde yaptığınız bir değişikliği yeni bir satıra geçmeden hemen aynı satır üzerinde yeni bir değişiklik ile güncelleyebilirsiniz.

Örnek vermek gerekirse : Aşağıdaki kod a taglerine önce test isimli class ı uygular sonra show eder ve içine wuuuuuu yazar…

Her fonksiyon bir jQuery objesi geri döndürür.

$("a").addClass("test").show().html("wuuuuuu");

Kaynak : JQuerturk

Öncelikle jQuery kodlarımızı test edebilmemiz için bir html doküman üretelim :

Metin olarak gosterKodu kopyalaYazdir?

1. <html> 
2. <head> 
3. <script type="text/javascript" src="path/to/jquery.js"></script> 
4. <script type="text/javascript"> 
5. // Kodlarımızın geleceği alan </script> 
6. </head> 
7. <body> 
8. <a href="http://jqueryturk.com/">jQueryTurk</a> 
9. </body> 
10. </html> 

<html>

<head>

<script type="text/javascript" src="path/to/jquery.js"></script>

<script type="text/javascript">

// Kodlarımızın geleceği alan </script>

</head>

<body>

<a href="http://jqueryturk.com/">jQueryTurk</a>

</body>

</html>

• path/to/ : jQuery dosylarının nerede olduğunu belirten kısımdır. İndirdiğiniz js dosylarının bulunduğu alanı burada belirtmelisiniz.
• Kodlarımızın geleceği alan : Özel durumlar hariç kodlarımızı yazacağımız alandır.

Metin olarak gosterKodu kopyalaYazdir?

1. $(document).ready(function(){}); 

$(document).ready(function(){});

Yukarıda verilen kod bloğu kaba tabirle kandır, candır $(document).ready(callbakFunction) bize kodlarımızın sayfa yüklenmesi tamamlandığında çalışacağını garanti eder. Bu da bir çok sorunun üstesinden otomatik olarak gelmenizi sağlar.

Örnek :

Metin olarak gosterKodu kopyalaYazdir?

1. $(document).ready(function(){ 
2. $("a").click(function(event){ 
3. alert("Merhaba"); 
4. }); 
5. }); 

$(document).ready(function(){

$("a").click(function(event){

alert("Merhaba");

});

});

Yukarıdaki kod sayfanızdaki tüm a taglerine click olayı ekler ve javascript alert vermelerini sağlar.

Kaynak : JQueryTurk

Genelde internet üzerinden doldurup gönderdiğimiz formlarda veriler, düz yazı olarak, SSL kullanılmadan şifresiz olarak gönderilirler. jCryption ise formlardaki POST/GET veri alışverişini şifreleyen ve güven vaad eden bir jQuery plugini/eklentisi.