JQuery ile Form Kontrolü

JQuery ile hayatımızı kolaylaştıran uygulamalardan bahsetmeye devam ediyoruz. Bu sefer web sitelerimizin artık her alanında bulunan formları, nasıl istediğimiz kriterlere göre doldurtabileceğimizi göreceğiz.

JQuery ile form üzerinde doldurulan verileri kontrol edebilmek için bazı pluginler mevcut. Ben bunlardan JQuery Validation eklentisini tercih ediyorum. Bu eklentiyi kullanabilmek için öncelikle şuradan indirmelisiniz. Ayrıca projenize/sayfanıza JQuery'yi de dahil etmeniz gerekli. Bunları aşağıdaki şekilde yapabilirsiniz:

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.js"></script>

Bundan sonra yapmanız gerekn doğrulama işlemlerinin yapılacağı formu belirtmek ve bu formda hangi alanlara ne gibi kontroller uygulanacağını bildirmek. Ayrıca her alana ve kontrole özel hata mesajları da hazırlayabilirsiniz.

Örnek olarak sadece kullanıcı adı ve e-mail adresinin girilebileceği 2 field'a sahip bir formumuz olsun. Bu formda geçerli e-mail adresi kontrolü yapalım. Kullanıcı adı da sadece sayılardan oluşabilsin. Ayrıca iki alanın da doldurulması zorunlu olsun. Bu işlemleri yapacağımız JQuery kodumuz aşağıdaki gibi olacaktır :

<script type="text/javascript">
$(document).ready(function() { 
$('#formid').validate({ 
rules: { 
userid: { required: true, number: true }, 
email: { required: true, email: true }
}, 
messages: { 
userid: { required: 'Gerekli', number: 'Lütfen sayı giriniz' }, 
email: { required: 'Gerekli', email: 'Lütfen geçerli bir e-mail adresi giriniz' }

}); 
}); 
</script>

Gördüğünüz gibi anlatımı bile koddan neredeyse daha uzun sürdü :) Burada #formid formumuzun ayırt edici id'si, userid kullanıcı adı alanının name değeri, email de e-mail alanının name değeridir. Plugin ile ilgili çok fazla sayıda örnek uygulamaya şuradan ulaşabilirsiniz.

JQuery'yi seviyoruz :)

Yorumlar

Facebook Yorumları
Tekno Dergi Yorumları
Misafir kullanıcısının resmi

Anlatım için teşekkürler.
1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="jquery.validate.js"></script>
Bunları tagından öne kullandığımda içerikteki menüler açılmıyor. Buna nasıl bir çözüm bulacağız? Teşekkürler

Büyük ihtimalle sayfanızda kullandığınız başka bir javascript ile çakışıyordur. Sırayla kullandığınız scriptleri tek tek eleyerek deneme yapabilirsiniz.

Misafir kullanıcısının resmi

Bunu ne tetiklicek ?

button'mu submitbutton'mu ? sonra bu kodun yapısı bir method gibi değil sanırım.. bununla ilgilide bilgi verirseniz tam süper olucak saygılar.

Kontrolü button tetikliyor. Kodda #formid yazan yere, butonun bulunduğu formun id'sini yazıyorsunuz. Rules kısmından da inputların şartlarını belirliyorsunuz.

Merhaba öncelikle jqury hakkında veridiğiniz bilgiler için teşekkürlerimi sunuyorum. Örnekteki kodda belirttiğiniz id seçici kısmına formun idsini "#form" olarak atadım. aynı zamanda class seçici olarak ta denedim ".form" iki textfieldim var ve kodlarım şu şekilde olmasına rağmen gönder butonuna basınca tetiklemiyor. acaba problem nerede ? diğer java scriptlerimle çakışma söz konusu olabilir mi ?

$(document).ready(function() { $('#form').validate({ rules: { telefon: { required: true, number: true }, eposta: { required: true, email: true } }, messages: { telefon: { required: 'Gerekli', number: 'Lütfen doğru bir telefon numarası giriniz' }, eposta: { required: 'Gerekli', email: 'Lütfen geçerli bir e-posta adresi giriniz' } } }); });

Merhaba, #form olarak belirttiğiniz formunuzda id="form" şeklinde bir bölüm var değil mi? Eğer validate.js kütüphanesini de eklediyseniz, normal şartlarda sorunsuz olarak çalışması gerekiyor örnek kodun.

theAdmin kullanıcısının resmi

bu kontrollerde bir if kullanmak istiyorum. bunu nasıl kontrol edebilirim?
Bir üye hesabı oluşturulacak fakat isteğe bağlı bireysel ya da kurumsal hesap olacak.
Jquery ile bireysel seçili ise T.C. kimlik no, kurumsal seçili ise firma ünvanı, adresi, vd, vno değerleri istiyorum.
Ama hangisi seçili ise onun altındaki değerler kontrol edilmeli. Bunu nasıl yapabilirim? Kendi sitesine de baktım ama pek anlayamadım. Yardımcı olursanız sevinirim.
Teşekkürler...

Yeni yorum ekle

İlgili Yazılar

Bana kalırsa en iyi javascript framework'u olan Jquery ve genel olarak javascript ipuçlarını , alıştırmalarını içeren bir yazı hazırlamış smashingmagazine.Eğer jquery kullanıcısı iseniz göz atmakta fayda var.

Her ne kadar şu "otomatik" kelimesini sevmesem de burada kullanmam gerekiyordu :) Bir projede gerekli olduğu için bu tarz bir uygulamaya ihtiyaç duydum.

Örneğin sayfanızın üst kısmı çok uzun görsel ve menülerden oluşuyor ve içeriğiniz alt tarafta kalıyor. Bu durum ana sayfa için doğal karşılanırken detay sayfalarda içeriği görüntülemek için sayfayı aşağı scroll ettirmek gerekiyor. Hal böyle olunca pek çok ziyaretçi sayfadaki içeriği göremeden sayfadan ayrılabiliyor ve sayfanın yenilendiğini bile farkedemeyebiliyor. Bu durumda ne yapmamız gerekiyor? Detay sayfalarda, sayfa yüklendiğinde otomatik olarak sayfayı içeriğin olduğu bölüme odaklamak !

Drupal ile geliştirdiğiniz projenize Jquery için hazırlanmış pluginleri ekleyerek çeşitli fonksiyonlar kazandırmak isteyebilirsiniz. Zaten Drupal varsayılan javascript framework'ü olarak da JQuery'yi kullanıyor. Yani JQuery kodu yazmak istediğinizde, dosyanızın başına kendinizin JQuery'yi dahil etmesine gerek kalmıyor. Ancak pluginleri tabiki eklemeniz gerekli. Bunun da bir kaç yöntemi var;

İlk yöntem temanızın .info dosyasını kullanarak eklemek. Tema klasörünüzdeki temaismi.info dosyasını açıp, içerisine scripts[] = scriptdosyasiadi.js kodunu eklediğinizde otomatik olarak o javascript dosyası sayfanıza eklenir.

İkinci yöntem olarak da page.tpl.php dosyanızı elle düzenleyerek <head></head> etiketleri arasına javascript kodunuz eklemek olacaktır. Tabii bu pek sistematik bir çözüm değil.

JQuery ile hazırlanmış pek çok accordion eklentisi mevcut. Accordion'u ister menü isterseniz de direkt içeriğinizi sunmak için kullanabilirsiniz.

jQuery öğrenmek istiyorsanız aslına bakarsanız internette çok sayıda kaynak mevcut. Ama sistematik bir şekilde baştan sona pek çok şeyi öğrenebileceğiniz düzenli eğitim serisi az.