JQuery ile Form Doğrulama

JQuery serisinin yeni yazısında projelerimizde sıkça kullandığımız form doğrulama uygulaması nasıl yapılır bunu anlatacağım. Doğrulamayı bir eklenti yardımıyla yapacağız. Yazı içinde eklentinin sayfaya eklenişi, eklentinin kullanımı ve bu eklentinin son sürümünü indirebileceğiniz link bulunmaktadır.
Hepimizin sitelerinde ihtiyaç duyduğu form doğrulama işlemlerini jquery ile nasıl yapabiliriz. Bu yazıda bunu anlatacağım. Yazıda kullanacağım eklentilerin adreslerini yine yazı içinde bulabilirsiniz.

Bir sayfamız olduğunu düşünelim. Bu bir iletişim formu olsun… İçindeki kutucuklar şunlar:
-Ad Soyad
-Email Adresi
-Mesaj
Gayet basit bir sayfa. Kutucuklara girilen verileri kontrol etmek için ASP veya PHP ya da her neyse hangi programlama dilini kullanıyorsanız onunla kontroller yaparsınız ama bu hem sizin hem de ziyaretçi için en iyi seçim olmaz. Bunun yerine Javascript ile bunu yaparsanız ziyaretçi başka bir sayfaya yönlenmeden hatalarını öğrenecek ve bilgiler doğruysa ancak formu submit edebilecek.
Bunun için ben daha önce bir projemde kullandığım Jquery Validation eklentisini kullanmaya karar verdim. Özel bir isim koymamışlar plugine sitesinde böyle geçiyor… Siz daha farklı eklentiler kullanmak isteyebilirsiniz. Bunun için şu adresi kullanabilirsiniz. Jquery Validation eklentisinin son sürümünü de şu adresten indirebilirsiniz.
Kullanımına geçelim:
Jquery Validation’ın kullanımı gerçekten çok basittir. Hani bazı eklentiler olur her kullanımında dökümantasyona ihtiyaç duyarsınız ya… Bu onlardan değil. Bir kere kullandığınızda sonraki seferlerde herhangi bir bilgiye ihtiyaç duymadan kullanabilirsiniz.
Anlatımı yine örnek üzerinden göstereceğim. Anlaşılmadık bir nokta olursa lütfen yorumlarda belirtin hemen güncellemeleri yapayım. Neyse…
Formumuzda olan elementleri yazmıştım. Hatırlamayanlar için tekrarlayayım:
-Ad Soyad
-Email Adresi
-Mesaj
Bunlarda yapacağımız kontroller şunlar olmalı yani kullanıcı aşağıdaki koşulları gerçekleştirmeden formu gönderememeli.
-Ad Soyad bölümü en az 5 karakter olmalı.
-Email Adresine geçerli bir email adresi girilmeli ve boş bırakılmamalı.
-Mesaj bölümü de en az 10 karakter olmalı.
Üç alanımız da boş bırakılmayacak… Ve ayrıca yapacağımız kontrolleri belirledik. Şimdi formu oluşturmaya başlayalım. Normal formumuzu oluşturalım:

<form id="iletisim_form" method="post" action="iletisim.php">
<input type="text" id="ad_soyad" name="ad_soyad" />
<input type="text" id="email" name="email" />
<textarea name="mesaj" id="mesaj"></textarea>
<input type="submit" value="Formu Gönder" />
</form>

Basit olarak formumuz bu şekilde. Şimdi Jquery Validation ın nimetlerinden faydalanma zamanı. Bizim yapacaığımız formun sayfanıza eklemeniz gereken JAVASCRIPT kodları şunlar:

<script type="text/javascript">
$(document).ready(function(){
$("#iletisim_form").validate({
rules: {
adsoyad: {
required: true,
minlength: 5
},
email: {
required: true,
email: true
},
mesaj: {
required: true,
minlength: 10
},
},
messages: {
adsoyad: {
required: "Boş Bırakılamaz",
minLength: "En Az 5 Karakter"
},
email: "Geçerli Bir Email Adresi Girin",
mesaj: {
required: "Boş Bırakılamaz",
minLength: "En Az 10 Karakter"
}
}
});
});
</scrtipt>

Şimdi kodları incelemeye başlayalım. $(”#iletisim_form”).validate(); fonsiyonuyla yapıyoruz işlemlerimizi. Parametrelerle de daha kullanışlı bir hal alıyor eklentimiz veya formumuz. İçinde kullandığımız parametrelere bakalım:
Ana parametrelerimiz : RULES ve MESSAGES.
Rules: Rules ile formumuzun kurallarını belirliyoruz. Rules’da kullanabileceğiniz değerler aşağıda yazıyor.
Messages: Girdilerin hatalaı olması durumunda verilecek hata mesajı. Bu gerçekten çok iş gören bir şey;)
RULES ve MESSAGES’ın kullanımı:
Rules ve Messages validate fonksiyonunun parametreleriydi. Şimdi de rules ve messages’a parametreler atayacağız. Kullanımı şu şekildedir:
rules:{
[[input veya textarea id'si]] : {
[[gerekli parametreler(aşağıda yazıyor)]]
},
}
Messages de şu şekilde:
messages:{
[[input veya textarea id'si]] : {
[[parametre]] : [[hata mesajı]],
[[parametre2]] : [[hata mesajı]]
},
}
Yukarıdaki örnek formumuzu incelediğimizde de rules’da adsoyad a required:true ve minLength değerleriyle boş bırakılamaz ve en az 5 karakter olması gereken bir form haline getirdik. Diğer id’lerle de aynı şekilde çalıştık… messages de de nasıl ki required:true yazıyorsunuz required:”HATA MESAJI” şeklinde çalışılıyor. Her kontrole ayrı hata mesajları atanabilir bu da eklentimizin iyi yanlarından.
RULES’da kullanabileceğiniz parametreler (Sürekli Kullanılanlar) :
required : true Boş Bırakılamaz
email: true Geçerli Bir Email Adresi Olmak Zorunda
minLength: xx En az xx karakter olmalı
maxLength: xx En fazla xx karakter olmalı
url: true Geçerli bir URL olmalı
date : true Geçerli bir tarih olmalı
number : true İçerik sayı olmalı
digits : true İçerik sadece rakamlardan oluşmalı
equalTo(#xx) xx id’li input la aynı değere sahip olmalı
range[xx,yy] xx ile yy arasında bir değere sahip olmalı
Bir yazının daha sonuna geldik. Umarım anlatabilmişimdir. Bir sonraki yazıda görüşmek dileğiyle.