jQuery Form Kontrolü
Oluşturduğumuz formlarda bazı alanların zorunlu doldurulmasını isteriz ve bunun için bir denetim gerçekleştirmemiz gerekmektedir.
Bir çok yöntemle bu denetimi gerçekleştirebiliriz ama bana göre en uygun metod jquery ile yaptığımız boş/dolu kontrolüdür. Gerekli olan tek şey jquery.com adresinden jquery kütüphanesini temin edip, sayfamıza include etmek.
Sonrasında formumuza vereceğimiz id değeri ve yazacağımız javascript kodu ile kullanıcı form submit butonuna bastığında verilerin gönderileceği sayfaya geçiş olmadan boş/dolu kontrolü gerçekleşmiş olacaktır.
Örnek kod oluşturalım.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#kayitform").submit(function() {
if ($("#alan").val()=='') {
alert("Lütfen, alan 1 doldurunuz.");
return false;
}
if ($("input[@name='sec']:checked").val()==null) {
alert("Lütfen, seçenek 1 veya seçenek 2 işaretleyiniz.");
return false;
}
if ($("#combo").val()=='') {
alert("Lütfen, bir değer seçiniz.");
return false;
}
});
});
</script>
<form action="sayfa2.php" method="post" id="kayitform">
<label>Alan 1
<input type="text" name="alan" id="alan" />
</label>
<br /><br />
<label>
<input type="radio" name="sec" id="sec" value="1" />Seçenek 1
</label>
<label>
<input type="radio" name="sec" id="sec" value="2" />Seçenek 2
</label>
<br /><br />
<label>Seçiniz
<select name="combo" id="combo">
<option value="">Seçiniz</option>
<option value="1">Değer 1</option>
<option value="2">Değer 2</option>
</select>
</label>
<br /><br />
<label>
<input type="submit" name="button" id="button" value="Gönder" />
</label>
</form>
Yazdığımız örnek kodumuzda; normal bir texfield alanı, radio button ve list combo box dolu/boş kontrolü yapılmaktadır.
jQuery ile form alanları dolu mu boş mu kontrolü için çalışır demo sayfasına ve kaynak kodlara aşağıdaki linklerden ulaşabilirsiniz.
[ad code=2]
Demo : jQuery ile Form Kontrolü
Download : jQuery ile form kontrolü download
Şifre : phpdili.com








6 Yorum
Burak
05.21.2010
teşekkürler..
bunu alert komutuyla değil de label yanında bir div içinde uyarı şeklinde yapmak istesek nasıl yaparız?
Daimon
05.24.2010
if koşulu içerisinde alert komutu yerine, jquery label oluşturma kodlarını koyarsanız istediğiniz şekilde olacaktır.
Yücel K.
06.05.2010
Gerçekten benim için çok faydalı oldu. Teşekkür ediyorum.
İyi çalışmalar.
çağlar
09.21.2010
peki varsayalım ki girilmesini istediğim değerlersayı olmak zorunda olsa mesela telefon numarası gibi veya e-mail formatında bir yapı olsun istesem bunu nasıl ayarlayabilirim?
phpdili
09.22.2010
http://www.phpdili.com/ucretsiz-scriptler/jquery-… bu konu sorununuzu çözmekte yardımcı olabilir.
huseyin erken
03.01.2012
kaynak için teşekkür ederim ama benim ik sorum olacak
1- ben bu scripti eklediğimde boş dolu kontrolü yaptıktan sonra tüm değerler girilmiş ise action kısmında verileri gönderdiğim sayfaya mı devam edecek yoksa aynı sayfaya geri mi dönecek?
2- bu script mail adresinin gerçek olup olmadığını da kontrol eder mi?
yani php ile kontrol edersek 123abc@abc.com gerçekte var olmasa bile doğru bir mail gibi algılanıyor bu scriptle bu durumu da engellemiş olunur mu?
Şimdiden teşekkür ederim
Sonuç bulunamadı.