Bu yazımızda, form kontrolü (İşlem yaptırarak, giriş işleminin gerçek kişi tarafından yapılıp yapılmadığını kontrol edeceğiz) için bir captcha uygulaması yapacağız, burada sadece tarayıcı üzerinde kontrol edeceğiz, oysa bunu ajax kullanarak, bazı kontrol mekanizmalarıyla birlikte (salt uygulaması) sunucu taraflı da uyguladığınızda kesin sonuca ulaşırsınız.
Uygulama:
Verilen toplam doğru olarak iletildiğinde, "doğru" olduğu bir mesaj ile iletilecek ve form gönderilecek, diğer türlü "yanlış" mesajı gösterilecek ve form iletilmeyecek.
CSS yapısı:
#report_form{
padding:5px;
background:yellowgreen;
border-radius:4px;
color:white;
display:none;
}
#toplam_form{
margin-top:8px;
}
HTML yapısı:
<span id="report_form"></span><br />
<form id="toplam_form" action="#" method="post">
<span id="toplam_sayi"></span><br />
<input type="text" id="kutu" />
<input type="submit" value="Sonuc" />
</form>
JQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
//Rastgele sayı üretiliyor, birinci sayı
var sayi1=Math.floor(Math.random()*110);
//Rastgele sayı üretiliyor, ikinci sayı
var sayi2=Math.floor(Math.random()*110);
//Üretilen sayıların toplamı
var toplam=sayi1+sayi2;
//span arasına tolam gösterimi yapılıyor
$('#toplam_sayi').html(sayi1+"+"+sayi2+" = ?");
//Form gönderilirken kontrol yapılıyor
$('#toplam_form').submit(function(event){
$("#report_form").hide();
if($('#kutu').val()==toplam){
alert('Doğru');
//Bu fonksiyon gerçek uygulamada kaldırılacak
event.preventDefault();
//Formun gönderildiği #report_form id'li span içine yazdırılıyor
$("#report_form").text("Form başarıyla gönderildi! Teşekkürler...").show("slow");
}else{
alert('Yanlış');
event.preventDefault();
}
});
});
</script>
Açıklamalar:
- 5. Toplam için birinci sayı üretiliyor
- 8. Toplam için ikinci sayı üretiliyor
- 11. İki sayının toplamı hesaplanıyor
- 14. "#toplam_sayi" id'li spanın içine toplam ibaresi yazılıyor.
- 17. Formun göderilme işlemi sırasında kontroller yapılıyor
- 19. Rapor alanı "#report_form" gizleniyor
- 21. Eğer kutudaki değer doğruysa form gönderiliyor. (ÖNEMLİ: Burada doğru olsa da olmasa da form gönderme işlemi "event.preventDefault()" fonksiyonuyla engellenmiştir, siz gerçek uygulamada bu fonksiyonu, form gönderme durumunda kaldırmanız gerekir.
- 28. "#report_form" id'li span içine formun gönderildiğine dair bir mesaj yazdırılıyor.
- 29. Toplam doğru değilse form gönderme işlemi engelleniyor.
Kolay gelsin, görüşmek üzere...
