jquery

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&ouml;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

Hiç durma, hemen paylaş ;-)

    6 Yorum

    1. Burak

      05.21.2010

      Cevapla

      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

        Cevapla

        if koşulu içerisinde alert komutu yerine, jquery label oluşturma kodlarını koyarsanız istediğiniz şekilde olacaktır.

    2. Yücel K.

      06.05.2010

      Cevapla

      Gerçekten benim için çok faydalı oldu. Teşekkür ediyorum.

      İyi çalışmalar.

    3. çağlar

      09.21.2010

      Cevapla

      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?

    4. huseyin erken

      03.01.2012

      Cevapla

      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

    Bir Cevap Yazın