Web tasarım uygulamalarınızda veri doğrulamak (validation) olmazsa olmazlardandır. Gönderilen verilerin yanlış olmaması veya istenen verilen muhakkak girilmesi gereken durumlarda bu tip uygulamalara ihtiyaç duyarsınız.
Veri doğrulama işlemi, düzgün veri girişinden ziyade kötü amaçlı kullanımları da engellemek için mecburidir.
Özellikle veritabanına giriş yapılacaksa, form doğrulamalarını (Form Validation) mutlaka "sunucu taraflı (Serverside)" scriptlerle(PHP, ASP vb.) yapmak gerekir.
Fakat kötü niyetli bir giriş olmasa bile, kullanıcı, form girişlerinde hata yapabilir. Bu tip durumlarda doğrulamayı direkt olarak sunucu üzerinde yapmaktansa, tarayıcı üzerinde ilk kontrolü yapmak, gerekirse daha sonra sunucu tabanlı bir kontrol yapmak işimizi hızlandıracak ve sunucu üzerindeki yükü de hafifletecektir.
Bu tür durumlarda ilk kontrolü javascript ile yapmak akıllıca olacaktır, bu tip işler için Jquery olarak hazır eklentiler mevcuttur, (Bu tip örnekler de daha sonra hazırlanacaktır). Biz bu yazımızda işin temelini anlatan bir javascript uygulaması yapmaya çalışacağız.
Formumuz 2 adet text girişini kontrol edecek ve boş geçilmemesini sağlayacak:
Kontrol edilecek Form:
HTML yapısı:
<form name="form1" action="#" method="post" onsubmit="return validateForm()">
<table>
<tr><td>İsim:</td><td><input type="text" name="isim"/></td></tr>
<tr><td>Soy isim:</td><td><input type="text" name="soyisim"/></td></tr>
<tr><td> </td><td><input type="submit" value="Gönder"/></td></tr>
</table>
</form>
Javascript yapısı:
Yukarıdaki formumuzda gönderme işlemi yapıldığında "onsubmit" validateForm() metodu çağrılmaktadır. Javascript kodumuz(çağrılan fonksiyon) da aşağıdaki gibidir:
<script type="text/javascript">
function validateForm() {
var isim=document.forms['form1'][0].value;
var soyIsim =document.forms['form1'][1].value;
if (isim==null ||isim=="")
{
alert("İsim kısmı boş bırakılamaz");
return false;
}
if (soyIsim==null || soyIsim=="")
{
alert("Soyisim kısmı boş bırakılamaz");
return false;
}
}
</script>
Açıklamalar:
- 3. "document.forms" yapısı, sayfa üzerindeki form nesnesini bulmamızı sağlar, forms['form1'][0] ile sayfadaki "form1" isimli formun ilk üyesini elde ederiz.
- 4. forms['form1'][1] ile de formun ikinci üyesini elde ederiz.
- 11. "if" sorgusuyla bu alanların durumunu kontrol edip, "alert" ile uyarımızı iletiriz
Daha önce bahsettiğimiz gibi, web tasarım uygulmalarınızda bu tip kontroller yapmak, hem istediğiniz verilerin grilmesini sağlamak hem de (En önemlisi) kötü niyetli girişleri engellemek için gereklidir. Eğer girilen veriler veritabanına gönderilecekse javascript kontrolü haricinde muhakkak sunucu taraflı bir kontrol de yapmak gerekir.
Bu uygulamaya, e-posta, sayı, text, uzunluk, karakter, mask vb. gibi kontroller de eklenebilir. Bu örnek, javascript ile en temel veri kontrolünü nasıl yapabileceğimizi göstermektedir. Daha detaylı kontrol sistemleri oluşturmak da mümkündür.
Kolay gelsin, görüşmek üzere...
