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

İlginizi Çekebilecek Diğer İçerikler

13 Yorum

  1. Ömer Çıtak dedi ki:

    Ş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 dedi ki:

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

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

  3. Alperen dedi ki:

    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. 

  4. halil dedi ki:

    bunu select optionlara nasıl uygulayabilirz.

    • Caner Öncel dedi ki:

      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 dedi ki:

        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 Öncel dedi ki:

          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.

  5. halil dedi ki:

    Hocam denedim bu şekilde yine inputlar kızardı selectler kızarmadı.

    • Caner Öncel dedi ki:

      Sayende scripti güncellemiş bulunduk :)
      İşini görecek olan halini şuradan indirebilirsin:
      http://www.egonomik.com/script/jquery-input-kontrol/jquery-input-kontrol.zip

  6. halil dedi ki:

    Teşekkür ederim hocam elinize sağlık.

  7. Burak Şahin dedi ki:

    Formu gönderdikten sonra değilde input seçiliyken yazabilir miyiz? gerekli diye ?

  8. Caner Öncel dedi ki:

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

  9. muhammet dedi ki:

    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