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 yorum
Ş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 ;))
bunun boşuk kontrolünü nasıl yapabiliriz peki :)
boşluk yapınca yazı girildi gibi algılıyor ve post ediyor
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.
bunu select optionlara nasıl uygulayabilirz.
Selecte boş değerli bir option eklersen aynı işi görecektir.
Örnek:
2
3
4
5
<option value="">Lütfen seçiniz</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
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.
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.
Hocam denedim bu şekilde yine inputlar kızardı selectler kızarmadı.
Sayende scripti güncellemiş bulunduk :)
İşini görecek olan halini şuradan indirebilirsin:
http://www.egonomik.com/script/jquery-input-kontrol/jquery-input-kontrol.zip
Teşekkür ederim hocam elinize sağlık.
Formu gönderdikten sonra değilde input seçiliyken yazabilir miyiz? gerekli diye ?
Şu şekilde kullanabilirsin:
2
3
4
$(this).addClass('required');
$(this).parent().append('<span>* gerekli</span>');
});
submit() functionun içinde değil dışında olması gerek.
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