Bootstrap Ajax Form ile Basit Doğrulama

Warning: file_get_contents(http://twitter.github.com/bootstrap/): Failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/u989750086/domains/wpadami.com/public_html/wp-content/plugins/s-fonks/s-fonks.php on line 89

Biliyorum zilyon tane bu tarz doğrulama yapan jQuery eklenti var diyeceksiniz. Ama benim aramalarımda ajax gönderimler için bir doğrulama (validation) eklentisi bulamadım. Ben de oturdum kendiminkini yazdım. Bootstrap altyapısını kullandığım bir sistemde denedim ve çalıştığını düşünüyorum. Çünkü yapmak istediğim şeye cevap verebiliyor. Ufak bir anlatım sizi bekliyor :)

İçerikgizle

Sorun

Sayfa yönlendirmesi yapmadan, yani ajax kullanarak bazı formları kaydetmem, güncellemem ve hatta silmem gerekiyordu. Ama bu formların her birinde en az üç adet gerekli olan alanlar vardı (silme olayı hariç). Bunlar için jQuery ile ajax altyapıyı yazıyordum ama doğrulama yapmaya gelince eldeki (en azından araştırdığım) doğrulama sistemleri düzgün sonuç veremiyordu. Hepsi form.submit() durumuna göre yazılmıştı. Yani form ekleyerek gönderim yapmam gerekiyordu.

Düşünce

Form gönderimi yapmadan jQuery ile gönderilen bütün girdi (input) verilerinin toplanıp .ajax() ile gönderimi yapılmadan her birinin tek tek kontrol edilmesi, doğrulanması ve doğrulanamayan (misal boş girdi alanları) durumlarda formun gönderiminin yapılmaması.

Çözüm

Gönderilecek her girdi elemanına (input element) birer id atanıp bunların bir dizi (array) içerisinde toplanıp doğrulanma için jQuery .each() kullanılarak doğrulamasının yapılması ve doğrulama başarısız olduğunda bootstrap .control-group cssi içerisine error classı eklenerek belirtilmesi ve formun gönderilmemesi.

Gereklilikler

jQuery (tercihen 1.4 ~ 1.8.3 arası)
Başlangıç yada Orta düzey javascript bilgisi
Bootstrap Css
İki HTML input ve bir buton

Kod

Aşağıdaki ilk alanda form elemanı içerisinde bulunmayan ama bootstrap tasarımı kullanılarak form gibi gösterilen girdi elemanlarımız bulunmakta.


		<div class="form-inline">
			<div class="control-group">
				<input id="isim" type="text" placeholder="Ad Soyad">
			</div>
			<div class="control-group">
				<input id="yas" class="input-mini" type="text" placeholder="Yaş">
			</div>
			<button class="btn btn-primary" id="kaydet">Gönder</button>
			<img src="aload.gif" id="load" style="display:none;"/>
		</div>

İlgili gönder butonunun basılması anında gönderimi yapacak olan javascript kodumuz bulunmakta. Bu alanda bulunan değerlerin yanlarına ne işe yaradıklarını yazdım.


	$('#kaydet').click(function(){  //buton basılınca başlıyoruz...
	detay = ['isim','yas'];  //array değerlerimiz yukarıdaki inputların idsi
	sta = true; //varsayılan olarak gönderim değerimiz true 
    
		$.each(detay, function(){
			if ($('#'+this).val() == "")  //array için verilen her değer için #id inputun değerini kontrol ediyoruz
				{
					$('#'+this).parent().addClass('error'); //yukarıdaki if alanında boş döngü olursa yani değer yoksa bir üst alana error classı atıyoruz
					sta = false;  //ve tabii ki gönderimi kesmek için bu değeri false yapıyoruz.
				} else 
				{
					$('#'+this).parent().removeClass('error'); //değer alanı doldurulmuşsa alandaki class değerini siliyoruz
				}
			});
        if (sta == true)  // herşeyimiz doğru olarak yapılmışsa direkt gönderimi yapıyoruz.
		{
			$('#load').show(); //çalıştığını görmek için ajax loader.gif e sahip resmi görünür yaptık

			/* Burada kalan alan size ait. İster Ajax gönderim için kod yazın, isterseniz başka birşey yaptırın.*/
		}
    });

Yukarıdaki kodun yaptığı şey bizim detay dizisi içerisine eklediğimiz alan isimlerinin varolan girdi elemanlarıyla karşılaştırılması, üst div olan .control-group classına sahip olan dive error classının eklenmesi veya eklenmemesi ve her durumun düzgün gittiği anda gönderimin yapılma işlemine başlanması.

Örnek için buraya ve indirmek için aşağıdaki alana tıkla.

[filesaa id=2914]

Yazı içinde kullanılan eklentiler;
jQuery

http://twitter.github.com/bootstrap/

Soru ve önerileriniz için yorum alanını kullanabilirsiniz.
Selametle

BootstrapAjaxFormileBasitDogrulama

Etiketler

2 thoughts on “Bootstrap Ajax Form ile Basit Doğrulama”

mertdedi ki:
2 Temmuz 2013, 20:40
$(document).ready(function(){
$("#tikla").click(function(){ // #tikla ya tıklanıldığı zaman olacaklar.
$.ajax({
type:'POST', // POST Methodunu Kullandık.
url:'ekle.php', // Verinin Gönderileceği PHP Dosyası.
data:$('#deger').serialize(), // Serialize Form İle Gönderilen Verileri POST Etmek İçin
// Kullanılan Yardımcı Method.
success:function(cevap){ // Ajax İşlemi Başarıyla Sonuclandıgında Yapılacak İşlemler İçin
//Success Kullanılır.
$("#sonuc").html(cevap) // Gelen Veri Ekrana Yazdırıldı.
}})});
}
);
Bu kod ile ajax post yapıyorum.
Adınız:
fakat input bos oldugu zaman tıklaya bastıgımda hata vermıo db ye bos verı yzıo hocam yardım edermsn
1. Serkan Algurdedi ki:
  2 Temmuz 2013, 21:23
  Mert burada ajax işleminden önce if() sorgusunu döndürmen lazım. yani <code>if ($('#deger').val() != '') { $.ajax –işlemleri}else{ <!– hata döndür–>}</code> gibi. bu döngü senin değer tanımlayıcın boş değilse çalıştıracaktır sistemi. else alanı hatanı döndürecek olan kısımdır.

Comments are closed.