Bootstrap Ajax Form ile Basit Doğrulama

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 🙂

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.

İ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.

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

Bootstrap

Yazı içinde adı geçen ve kullanılan fonksiyonlar;
.each() | jQuery API Documentation
.parent() | jQuery API Documentation
.click() | jQuery API Documentation
.addClass() | jQuery API Documentation
.removeClass() | jQuery API Documentation
.val() | jQuery API Documentation
.show() | jQuery API Documentation
.submit() | jQuery API Documentation

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

 
  • mert

    $(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

    • 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.

WordPress gururla sunar.Theme: Flat by YoArts. WpAdamı Uyarlaması : Serkan Algur