jQuery ile basit form input kontrolü

CSS jQuery Web Tasarım 1 Dk. Okuma13 yorum
jquery form input control jQuery ile basit form input kontrolü

jquery form input control 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

13 Yorumu Görüntüle

13 yorum

  1. Ömer Çıtak üzerinde

    Ş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 ;))

    Cevapla
  2. Yasin Kars üzerinde

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

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

    Cevapla
  3. Alperen üzerinde

    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. 

    Cevapla
    • Caner Öncel üzerinde

      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>
      Cevapla
      • halil üzerinde

        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.

        Cevapla
        • Caner Öncel üzerinde

          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.

          Cevapla
  8. Caner Öncel üzerinde

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

    Cevapla
  9. muhammet üzerinde

    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

    Cevapla

Cevap Ver