GGJ’de Gökhan Yılmaz ile yapamadığımız birşey gece yarısı aklıma geldi, JS ile form kontrolü. Hem öğreneyim hem yazayım istedim.

Merhaba

Bazen form değişkenlerinizi get-post metodları ile server’a gönderip işlem yapmadan önce client tarafından tarayıcı üzerinde formun doğru doldurulup doldurulmadığını öğrenmek çok işinize yarayabilir. Bu sayede işiniz hızlanır, bandwith ve ekstra birçok kod’dan kurtulmuş olabilirsiniz.

Bu kontrolü yaparken yaptığımız işlem şu, form elementine gönder’e basıldığında ki biz buna onsubmit diyoruz, o anda form elementleri JS’e gitsin ve JS geri true-false döndersin, false olunca form işleme koyulmaz, true da koyulur.

Örnek 1 – Basit Örnek;

Bu örnekte sadece isim girişi olan bir form’da girişin boş mu dolu mu olduğunu anlamaya çalışacağız.

<form name=”form1″ action=”gokhan.jsp” method=”post”  onsubmit=”return kontrol()”>
İsim Gir:<input type=”text” name=”ad” value=”” /><br>
<input type=”submit” value=”Gönder” name=”gonder”/></form>

Biraz kodları açıklayalım

form:ismimize form1 dedik bunu ilerde kullanacağız, bazı örneklerde eğer tek formunuz varsa kullanmaya gerek olmayabilir, ama kullanmanızı tavsiye ederim.
action formun gideceği yani işlem göreceği sayfayı ifade eder
method: formun gönderilme metodunu ifade eder
onsubmit: form göndere basıldığında ne yapacağına ifade eder. burda kontrol() isimli JS’e git ve return lediği değeri uygula demişim, return’de true gelirse uygulanacaktır.

<script language=”javascript”>
function kontrol(){
if(document.form1.ad.value==){alert(“İsim Alanını Boş Bıraktınız…”);document.form1.isim.focus();return false;}
}</script>

Üsteki kod ise head-head tagları arasına koyduğum script kodum. fonksiyon adı kontrol olarak belirledim. ve bilgisayar gibi kodumu okumaya başlıyorum. Eğer document(busayfa)’da ki form1 isimli formdaki ad isimli elementin değeri == ise alert komutunu çalıştır ve İsim Alanını Boş Bıraktınız yazdır. ve geriye false döndür.
Kırmızı ile belirttiğim yerler kesme işaretleri oluyor iki kesme işareti ve ortası boş ‘ ve ‘ (ve yok ortada)
Alert :Ekrana uyarı penceresi çıkartır.

Örnek 2

Bazen Sadece boş olup olmadığını kontrol etmek yeterli değildir, 2 şifre alanı varsa şifrelerin aynı olup olmadığını, veya mail de @ ve . geçip geçmediğinide kontrol etmemiz gerekir. aşağıdaki kod bu özelliklerin hepsini yapmaktadır

HTML KODU

<form name=”form1″ action=”islemsayfasi.php” method=”post” onsubmit=”return kontrol()”>
İsim<input name=”isim” type=”text” /><br>
E-Mail:</td><input type=”text” name=”email” /><br>
Şifre : <input type=”password” name=”sifre1″ /><br>
Şifre Tekrar: <input type=”password” name=”sifre2″ /><br>
<input type=”submit” value=”Gönder” />
</form>

JS Kısmı

<script>
function kontrol(){
if(document.form1.isim.value==”){alert(“İsim Alanını Boş Bıraktınız…”);document.form1.isim.focus();return false;}
if(document.form1.email.value==”){alert(“Email Alanını Boş Bıraktınız…”);document.form1.email.focus();return false;}
if(document.form1.sifre1.value==”){alert(“Şifre Belirlemediniz…”);document.form1.email.focus();return false;}
if(document.form1.sifre1.value!=document.form1.sifre2.value){alert(“Yazdığınız Her iki Şifre Birbirinden Farklı…”);document.form1.sifre1.focus();return false;}
if((document.form1.email.value.indexOf(“@”))<1){alert(“Mail Adresinizi Kontrol Ediniz…”);document.form1.email.focus();return false;}
if((document.form1.email.value.lastIndexOf(“.”))-(document.form1.email.value.indexOf(“@”))<2){alert(“Mail Adresinizi Kontrol Ediniz…”);document.form1.email.focus();return false;}
}
</script>

<br>: Html’de alt satıra geçme tag’idir

 

Ekstra Bilgiler

1) Eğer yaş gibi bir değişken varsa ve sadece rakam girilmesini istiyorsak

if(!isNaN(document.form1.yas.value)){
alert(“Yaşınız sayı olmalı”);
return false;}

ile bu kontrolü yapabiliriz

2) Forma ulaşırken formun ismini yazmak gibi formun sayısal değerini yazarakda forma ulaşabiliriz.

DOM(Document Object Model): Tarayıcı ekranında nesnelerin oluşturduğu hiyerarşidir. Bu hiyearşide document bizim window’umuz dur. içindeki forms ise formun ismi.

Formu : document.forms[tamSayi]  ilede elde edebiliriz document.formIsmi ilede.

Kaynakça:

Reklamlar