jQuery ile basit form input kontrolü


jQuery kütüphanesini kullanan scriptimiz basit bir biçimde formdaki inputların boş olup olmadığını kontrol ediyor. Aslında vakit buldukça üzerinde çalıştığım detaylı bir iletişim scripti var, onun arefesinde ufak ve işlevsel bir özellik olarak bunu da paylaşmak istedim.

Form gönderildiği zaman boşluk kontrolü yapan kodlarımız aşağıdaki gibi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// form submit kontrol
$("#myform").submit(function() {

  var required = 0;

  $(".minput").each(function(index) {
    $(this).removeClass('required');
    $(this).parent().find("span").remove();  
     if($(this).val() == "") {
      $(this).addClass('required');
      $(this).parent().append('<span>* gerekli</span>');
      required++;
     }                
  });
 
  if(required>0) {
    return false;
  }      
  return true;
});

jQuery kullanımı hakkında bilgi sahibi değilseniz script dosyalarını bilgisayarınıza indirip detaylı olarak incelemenizi ve çalışmanızı bu dosyalar üzerinden yürütmenizi tavsiye ederim.

Scriptin çalışan örneği
Demo

Scripti indir (68kb)
Download

Facebook Yorumları

13 Yorum

  1. Ömer Çıtak

    Şimdi sevmediğin okur tipi örneği sergileyip, scripti indirip başka hiçbir sayfayı okumadan siteden ayrılacağım. sonrada yarın birgün bu scripti kullandığım zaman egonomik linklerini sileceğim 🙂 (inş ciddiye almazsın. çünki alan var ;))

  2. Yasin Kars

    bunun boşuk kontrolünü nasıl yapabiliriz peki 🙂

    boşluk yapınca yazı girildi gibi algılıyor ve post ediyor

  3. Alperen

    Aslında bu koda hiç gerek yok. HTML 5 tüm tarayıcılarda  tam  çalışıyor olsa input’a required ya da  required=”required” yazmaları yardımcı olacaktır. 

    • Caner
      Yazar

      Selecte boş değerli bir option eklersen aynı işi görecektir.

      Örnek:

      1
      2
      3
      4
      5
      <select>
        <option value="">Lütfen seçiniz</option>
        <option>İstanbul</option>
        <option>Ankara</option>
      </select>
      • halil

        Hocam denedim çalısıyor ama kızarmıyo kutular css ayarlarınıda yaptım inputlara otomatik class=”required” olarak geliyo ama select lere gelmiyor.

        • Caner
          Yazar

          Pardon Halil benim hatam. Input ve selectlere atıyorum class=”myinput” gibi bir class atayıp $(“input”).each(function(index) ifadesini $(“.myinput”).each(function(index) şeklinde değiştirirsen muhtemelen çalışacaktır. Denemedim ama bir bak, sorun çıkarsa detaylıca bir inceleyeyim.

  4. Caner
    Yazar

    Şu şekilde kullanabilirsin:

    1
    2
    3
    4
      $(".minput").focus(function() {
          $(this).addClass('required');
          $(this).parent().append('<span>* gerekli</span>');        
      });

    submit() functionun içinde değil dışında olması gerek.

  5. muhammet

    Merhaba oncelıkle kodu yazdım ama benım formu doldurdugumda dırek gonderıyor ben butona basılınca kontrol edıp ona gore gondermek ıstıyorum bunla ılgılı js kodunda nereye mudale etmem gerek

    $(document).ready(function(){

    // send form buton
    $(“#ekle”).click(function() {
    $(“#myform”).submit();
    });

    // enter
    $(“#myform”).keypress(function(e) {
    if(e.keyCode == 13) {
    $(“#myform”).submit();
    }
    });

    // input focus & keypress
    $(“.minput”).focus(function(){
    $(this).removeClass(‘required’);
    $(this).parent().find(“span”).remove();
    });

    // form submit kontrol
    $(“#ekle”).click(function() {

    var required = 0;

    $(“.minput”).each(function(index) {
    $(this).removeClass(‘required’);
    $(this).parent().find(“span”).remove();
    if($(this).val() == “”) {
    $(this).addClass(‘required’);
    $(this).parent().append(‘ * gerekli’);
    required++;
    }
    });

    if(required>0) {
    return false;
    }

    return true;

    });

    }); //doc ready end

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir