Sizlere bu yazımda jquery ile yazılmış bir form doğrulama sınıfı olan "Inline Form Validation Engine" jquery eklentisini tanıtacağım.

Projelerimizde form doğrulama en çok karşılaştığımız kısımlardır. Tanıtacağım jquery eklentisi form hatalarını görsel  olarak etkili bir şekilde göstermemizi sağlıyor. Ayrıca kullanımı oldukça kolay.

Eklentiyi buradan indirebilirsiniz.

Ayrıca buradan detaylı bilgilye ulaşabilirsiniz.

Kullanımı

Inline Form Validation Engine eklentisini kullanabilmek için sayfamıza jquery kütüphanesini dahil etmeliyiz.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>

Daha sonra indirdiğiniz dosyalar içerisinde kütüphanenin bulunduğu js/jquery.validationEngine.js ve js/languages/jquery.validationEngine-tr.js dosyalarını da sayfamıza dahil etmeliyiz.

<script src="js/jquery.validationEngine-tr.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

Son olarak css dosyasını dahil ediyoruz.

 <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

Dosyaları sayfamıza dahil ettikten sonra tek yapmamız gereken validation vermek istediğiniz inputunuza class tanımlamanız yeterli olacak. İsterseniz classları nasıl tanımlacağımıza bakalım.

<form id="formID" method="post" action="submit.action">
        <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />
</form>

Kütüphaneyi çalıştıran kod parçacığı :

$(document).ready(function({
    $("#formID").validationEngine('attach');
});

İnputun tarih formatında olması ve boş bırakılmaması için classı validate[required,custom[date]] olarak tanımlıyoruz.

<input class="validate[required,custom[date]]" name="date" type="text" value="2010-12-01" />

İnputun url fomatında olması için classı validate[custom[url]] yapıyorz.

<input value="http://" class="validate[custom[url]] text-input" type="text" name="url" />

İki inputun bir biriyle eşlesmesi için classı aşağıdaki gibi tanımlamalıyız.

<input value="karnius" class="validate[required] kendi_stil_classimiz" type="password" name="password" />
<input value="kaniusBAD" class="validate[required,equals[password]]" type="password" name="password2" />

Eklenti de kontrol için bir çok özellik mevcut ama hepsini burdan yazarsam yazı çok uzayacak. Siz indirdiğiniz dosyalar içiersindeki demo klasörü içerisinde örneklerin kodlarından diğer kullanımlara bakabilirsiniz.

Diyelimki kendi yazdığım bir fonksiyon ile validation yapmak istedik ozaman ne yapmalıyım?

Yazacağımız fonksiyon aşağıdaki gibi olmalı. Sizin yazacağınız fonksiyonlarda aşağıdaki gibi dört parametre almalı çünkü bu parametreler eklenti tarafından göderilecek bizde bunları kullanarak fonksiyonumuzda input kontrolü yapacağız.

function checkHello(field, rules, i, options){
    if (field.val() != "HELLO") {
        return options.allrules.checkHello.alertText;
    }
}

Bu fonksiyon ile kontrol yapılması için inputumuzun classı aşağıdaki gibi olmalı.

<input class="validate[funcCall[checkHELLO]]" name="date" type="text" />

Bu fonksiyonumuzda hata oluşursa ekrana verilecek uyarıyı tanımlamak için dil dosyasını açıp aşağıdaki satırları daha önce tanımlanan hata mesajlarının en sonuna ekliyoruz.

 "checkHello": {
     "alertText": "* Hello olmak zorunda!"
}

Gördüğünüz gibi kendi yazdığımız fonksiyon ile çok basit bir şekilde eklentiyi kullanarak form doğrulamada kullandık.

İsterseniz bir tane de ajax ile örnek yapalım. İlk olarak dil dosyamızı açıp daha önce tanımlanan kuralların en sonuna aşağıdaki kuralımızı ekliyoruz. Burada ajaUserCallPhp bizim classımızda tanımlayacağımız isim olacak.

"ajaxUserCallPhp": {
        //ajax işlemini yapacak olan url
         "url": "phpajax/ajaxValidateFieldUser.php",
         // eğer inputun değeri dışında göndermek istediğiniz bir veri varsa extraData
         "extraData": "name=eric",
         // Doğrulama işlemi başarılı olduğunda verilecek uyarı alertTextOk
         "alertTextOk": "* Bu kullanıcı adını kullanabilirsiniz",
         "alertText": "* Bu kullanıcı adı kullanımda",
        // Ajax ile veri kontrol edilirken alertTextLoad
         "alertTextLoad": "* Doğrulanıyor, lütfen bekleyiniz"
}

Ajax ile kontrol edilecek inputumuz aşağıdaki gibi olacak.

<input class="validate[ajax[ajaxUserCallPhp]] text-input" type="text" name="user_name" />

php dosyamızın (phpajax/ajaxValidateFieldUser.php) içeriği :

$deger=$_GET['user_name'];

$dizi= array();
$dizi[0] = "user_name";

if($deger=="karnius"){
    $dizi[1] = true;
}else{
    $dizi[1] = false;  
}

echo json_encode($dizi);

Kodumuzda tanımladığımız $dizi değişkenin ilk elemanı inputumuzun name değerine , ikinci elemanı ise doğrulama işleminin başarılı olması durumunda true, başarısız olma durumunda ise false değerine eşit olmalı.

Elimden gelidiğince kullanımı hakkında örnekler vermeye çalıştım ama hepsini vermem çok zor, siz demo dosyalarını inceleyerek kullanımı hakkında daha detaylı olarak bilgi sahibi olabilirsiniz.

Sonuç

Artık bu eklenti ile form doğrulama işlemlerimizi çok kolay bir şekilde hem görsel olarak hemde hızlı bir şekilde yapabileceğiz.