Jquery ile bir çok validation (doğrulama) plugin’i bulmamız mümkün. Ancak küçük ve orta boyutlu projelerde kendimize has ve daha küçük boyutlu doğrulama ihtiyaçlarımız doğabilir. Kendi yazdığımız kodlar her zaman için daha rahat kontrol altında tutulabilir diye düşünüyorum.

Jquery ile bir formda yer alan input elemanlarından “type=text” yani tipi yazı olanları kapsayan bir script yazalım. Doğrulama esnasında ihtiyacımız olan 3 şey ;

<ul>
	<li>O elemanın boş olup olamayacağı</li>
	<li>Boş değil ise kaç karakterden az olamayacağı</li>
	<li>Özelleştirilmiş hata mesajı</li>
</ul>

Oluşturduğumuz standart inputlarda bu alanlar tabii ki yer almamaktadır. Biz kendimiz oluşturmalı yada var olan attributeleri(özellikleri) kendimize göre kullanmalıyız.

Ben elemanın value(değer) kontrolü için required(gerekli) diye bir özellik eklemeyi tercih ettim. En az kaç karakter olacağını ise rel özelliğinden belirleyeceğim.Özelleştirilmiş hata mesajı için ise hata özelliğini kullanacağız.

Örnek input kodumuz :

HTML tarafında yapmamız gerekenler bu kadar. Asıl konumuz olan js tarafında ise jQuery ile hiç zorlanmadan fonksiyonlarımızı yazabileceğiz. 3 farklı fonksiyon yazmamız gerekecek.

<ol>
	<li>Value kontrol işlemleri için</li>
	<li>Hata mesajı göstermek için</li>
	<li>Hata mesajını ekrandan silmek için</li>
</ol>

1. Fonksiyonumuz : inputValueKontrol

Kısaca yapacaklarımızı anlatmak gerekirse : Öncelikle tüm inputları foreach ile döngü içerisine alarak kontrol ediyoruz. Required değeri 1 olanların valuelarına bakıyoruz. Eğer value uzunluğu (length) rel değerinden az ise bir hata mesajı çağırıyoruz yoksa işleme devam ediyoruz.

Kodlarımızı kısaca açıklayalım. İlk fonksiyonumuz olan inputValueKontrol ile başlayalım.

$(‘input’).each(fucntion(){}); ile tüm inputları bir diziye atadıktan sonra bir döngü içerisinde tek tek inceleyeceğiz.
Döngümüz başladıktan sonra incelemekte olduğumz inputun required özelliğinin 1 olup olmadığını kontrol ediyoruz. Peki bir inputun özelliklerini nasıl alırız :

$(this).attr(“required”) şeklinde, bulunduğumuz input’un attributelarından(özelliklerinden) istediğimize ulaşabiliriz.

if($(this).attr(“required”)==”1″) satırı ile validation’a açık olan inputları seçiyoruz.

var tur = $(this).attr(“rel”);
var hata = $(this).attr(“hata”); Burada tur istenilen verinin uzunluğunu hata ise istenilen veri uzunluğuna erişilmediği zaman gösterilecek hatayı dönderecektir bize. Eğer hata mesajımız yok ise daha önceden belirlediğimiz mesajı göstermesi için şu satırları ekleyelim :

if(!hata){hata = “Bu alanı boş bırakamazsınız”;}

Fonksiyonumuzun çalışmaya başladığı nokta input’un onblur event’ıdır.

$(this).blur(function(){});

Fonksiyonumuz başladığına göre gerekli kontrollerimize başlayabiliriz. Öncelikle tur değişkenimizin varlığına göre bir kontrol yapıyoruz ve required değeri 1 iken rel değeri 1′den büyük ve boş değilse yapılacakları belirlemek için şu satırları ekliyoruz :

if(tur&gt;1 &amp; tur != ""){}

İstenilen değer 1′den büyük ve boş değilse değeri kontrol ediyoruz. Eğer değer uzunluğu istenilen uzunluktan büyük değilse hata mesajını gösteriyoruz ve input’un kenarlıklarını şekillendiriyoruz.

var thisValue = $(this).val();
var thisValueLength = thisValue.length;
if(thisValueLength&lt;tur){
$(this).css("border","solid 1px #f00");
hataMesaj(hata);
}else{
$(this).css("border","1px solid #C0C0C0");
hataMesajiSil();
}

Eğer değerler doğru isede input’un kenarlıklarını eski haline çeviriyoruz ve mevcut olan hata mesajını siliyoruz.

Birde tur (yani rel) değerinin olmadığı durumlar var. Bu inputların değerinin boş olamayacağı anlamına geliyor. Aynı işlemleri rel’i 1 kabul ederek tekrar uyguluyoruz.

 var thisValue = $(this).val();
var thisValueLength = thisValue.length;
if(thisValueLength==0){
$(this).css("border","solid 1px #f00");
hataMesaj(hata);
}else{
$(this).css("border","1px solid #C0C0C0");
hataMesajiSil();
}

Inputların değer kontrol işlemlerine ait kodların inputValueKontrol fonksiyonunda olduğunu söylemiştik. Bu fonksiyona ait kodlar aşağıdaki gibidir.

Şimdi hata mesajlarını ekrana yazdıran fonksiyonumuz hataMesaj‘ı yazalım.Bu fonksiyonun mantığı çok basit. Tek parametre ile gösterilecek mesajı alıyoruz ve bunu bir div etiketinin içerisine ekledikten sonra sayfaya ekliyoruz. Ekstra olarak yaptığımız tek işlem bu div etiketinin sayfada ekli olup olmadığını kontrol etmek. Eğer daha önceden eklenilmiş bir etiket var ise sadece içeriğini değiştiriyoruz ve en son hata mesjını ekliyoruz. En son olarakda bu mesajın 30 saniye sonra kendisini imha etmesini sağlıyoruz :)

En son fonksiyonumuz ise ekrana yazdığımız hata mesajını kaldırma fonksiyonu. Bunu açıklamaya sanırım gerek yok.

Örnek uygulamaya buradan ulaşabilirsiniz.

Benzer Yazılar