jquery logo

jQuery ile Form Kontrolü

Bu yazımızda birçok form üzerinde eksik girilen, yanlış girilen ifadeler için Javascript kullanarak uyarı vermeyi, kullanıcıyı uyarmayı göstereceğim.

Öncelikle örnek olarak kullanıcıdan isim, şifre ve kimlik numarası isteyen bir formumuz olsun. Bunun için html ile 3 tane giriş alanı ve 1 tane de gönderme butonu ekleyeceğiz ve bunları kontrol etmek için bunlara bir id ve kullanıcılar neyi dolduracağını anlamaları için metin giriş alanlarının içine placeholder ekleyeceğiz. Gelin hemen kodlarına geçelim.

web form örneği html

Ekleyince böyle bir form elde etmemiz gerekiyor. Kodu da şu şekilde olacaktır.

web form kodları

Formumuzu oluşturduk fakat sayfanın en sol kısmında yer alıyor. Biz bunu bootstrap kullanarak(başka birçok yolu var fakat bootstrap sayfayı 12 eş parçaya böldüğü için nerede olacağını belirlemek kolay oluyor.)

head etiketleri arasına aşağıdaki kodu ekleyerek bootstrap’ı ekleyebilirsiniz.

<linkrel=”stylesheet”href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
web bootstrap sayfa konumlandırma

Şimdi bu form da kullanıcıya uyarı vermesi için Javascript’in jQuery kütüphanesini kullanacağız.

Bunun için head etiketleri arasına aşağıda verdiğim kodu ekleyiniz.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
ve kodlarımızı yazmak için
<script type=”text/javascript”> </script>
etiketlerini ekliyor ve başlıyoruz içini doldurmaya…
Form kontrolünü “Gönder” butonuna bastığımızda olmasını istediğimiz için;
$(document).ready(function(){
$(‘#submit’).click(function(){
}
}
yazıyoruz. Dikkat etti iseniz Gönder butonumuzun id’sini (#submit) yazıyoruz. Ve bunun içersine formdan gelen değerleri val anahtar kelimesi ile alıyoruz.
$(document).ready(function(){
$(‘#submit’).click(function(){
isim=$(‘#isim’).val();
sifre=$(‘#password’).val();
tc=$(‘#tc’).val();
bunun da altına uyarımızı vermek istediğimiz yer için(form içerisine) bir div alanı açıyoruz.
<div class=”uyari”style=”color:red;”>
</div>
bunu da hemen jquery kodlarımızın arasına ekliyoruz.
$(document).ready(function(){
$(‘#submit’).click(function(){
isim=$(‘#isim’).val();
sifre=$(‘#password’).val();
tc=$(‘#tc’).val();
uyari=””;
şimdi ise gelelim bu gelen değerlerin kontrolüne..
isim şifre ve kimlik boş geçilemesin, isim 3 harfden küçük olmasın, kimlik ise 11 uzunluğunda olması gerektiğini kulanıcılara uyarı olarak yansıtalım.. Bunun için if else if kullanacağız. Eklediğimiz kodlar aşağıdaki gibi olacaktır..
$(document).ready(function(){
$(‘#submit’).click(function(){
isim=$(‘#isim’).val();
sifre=$(‘#password’).val();
tc=$(‘#tc’).val();
uyari=””;
if(isim==””) {
uyari+=” isim alani boş olamaz “;
}
else if(isim.length<3){
uyari+=”İsim alanı 3 karakterden az olamaz “;
}
if( sifre==””) {
uyari+=” password alani boş olamaz “;
}
else if(sifre.length<4){
uyari+=”şifreniz 4 haneden küçük olamaz!..”
}
if( tc.length!=11) {
uyari+=” tc-kimlik 11 hane olmalidir “;
}
$(‘.uyari’).text(uyari);
});
});
Görsel olarak kodlar:

jQuery kodları

Jquery form kontrolü örnek
Hemen arkasından son olarak html kodlarını ekliyorum:
web form oluşturma html kodları
Vee çalışır hali:
html jquery form kontrolü
jquery form kontrolü örnek
Umarım faydalı olmuştur.

Bir cevap yazın