Turning gears are the logo of co-scripts

Bir web sayfasında yer alan form içerisindeki elementlerin kontrollerini formu göndermeden yapmak ve eğer kriterlerimize uygun değilse kullanıcıyı uyararak formun gönderim işlemini iptal etmek istersek bunu javascript (vbscript) gibi betik dilleriyle yapabiliriz. 

Bu kriterler başlıca istenilen verinin tipi olabileceği gibi, verinin olup olmaması, verilerin bir başka veriyle uyumluluğu, verinin yeterince uzun olup olmadığı vb. olabilir. Bu kriterler kendi aralarında grup olup başka başka fonksiyonlar tarafından kontrol edilmeleri gerekebilir.

Fonksiyonlar kendi içlerindeki duruma göre formu submit edebilirler ancak onsubmit ile çağrıldılar ise ancak geriye false değeri döndürerek sonuç bildirebilirler.

Burada istediğiniz kadar fonksiyon tanımlayabilirsiniz.

<form id="bizimform" name="bizimForm" onsubmit="return fonk_1(); return fonk_2(); ........;return fonk_n">

 

co-scripts tag image onsubmitsubmitreturnform kontrol
ID:205 | Okunma:3447


 

Web uygulamasında kullanıcının veri göndermesi gereken durumlarda form kullanılır. Form kendisine verilen adrese (action) belirtilen metod (get/post) ile içerisindeki adı olan (name) her elementin değerini sunucuya iletir. Formun iletme işlemini başlatan submit tipinde bir girdi (input) elementinin tıklanma olayı veya bir script'in formun submit olayını tetiklemesidir. 

Her iki durumda da forma ait submit olayı onsubmit durumunun oluşması demektir. Onsubmit kesilemeyecek bir durum değildir. Bitmeden kesilip iptal edilebilir. Bunun için kendisine yanlış (false) değerinin geri çevrilmesi gereklidir.

Örneğin form elementinin onsubmit olayına doğrudan yanlış döndürürsek (return false) formun submit olayı asla gerçekleşmez. 

Formun onsubmit olayına script içinden de erişebiliriz.

Form içindeki elementlerin değerlerinin kontrolünü sunucuya gönderildiklerinde sunucu tarafıyla da kontrol edebiliriz ama özellikle basit değerleri henüz sunucuya gönderilmeden kontrol etmek varken gereksiz bir zaman ve güç sarfına neden olur.

En basit form içi elementlerden olan input elementinin metin girilen tüm tipleri .value ile içerisindeki metni ifade eder. Form submiti yapıldığında bir script fonksiyonuna yönlendirme yapılarak istenen değerlerin uygunluğu (bu yazımızda boş olup olmaması) kontrol edilebilir.

Ancak bu durumdan önce en sağlıklı kontrol şeması submit düğmesi (submit tipindeki input elementi) yerine normal button tipindeki input elementinin kullanılması doğru olur.

Böylese bu onay düğmesinin sayfanın herhangi bir yerinde hatta herhangi bir elementin misyonu halinde kullanılması bile sağlanabilir. Fonksiyon kontrolün sonucu olumlu olduğunda formu ele alıp formun onaylama ( .submit() ) olayını çağıracaktır.

Input elementinin tipi text olduğunda .value kontrol edilir.

Her ne kadar çoğu browser .value=='' kontrolünü kabul etse de null değeri ''  (boş) değerine eşit değildir. Titiz bir javascript kuralcısı bunu reddedecektir. En azından okunamadı hatası verecektir. .value değerinin kontrolünü en sağlıklı ! iledir.

Yani doğru kullanım şu şekilde olmalıdır.

function formKontrol_1()
{
var mAdi = document.getElementById('musterininAdi');
if(!mAdi.value){alert('Müşteri adı boş bırakılamaz!');mAdi.focus();return false;}
}

Burada doğrudan uyarı verip imleci ilgili elemente taşıyarak fonksiyondan çıktık. Dikkat edin mAdi.value=='' kontrolünü yapmadık. Js kodlarken yeni yeni öğrendiğimiz bu minik ipuçları bizi daha sağlıklı ve hızlı kod yazmaya yöneltecektir.

co-scripts tag image nullform kontroluonsubmitreturnfalseinput typemetin kutusu kontrolu
ID:203 | Okunma:3146


 

Merhaba,

İyi kötü herkes web ile uğraşırken js kullanmış ve kullanırken sayfa elementlerini pek çok yöntemle ele almak zorunda kalmıştır. Bu yöntemlerden en pratiği nesnenin id özelliğine atıfta bulunarak nesneyi bir değişkene eşlemek böylece değişken ismiyle pratik olarak kolaylıklar sağlamaktır.

Örneğin id degeri musteri_adi olan bir metin kutusu var ise

var mus_adi = document.getElementById('musteri_adi');

şeklinde mus_adi degiskenine nesne atanır. Böylece nesnenin .value gibi diger özelliklerini get veya set edebiliriz. Ama çok fazla nesne olduğunda fazladan byte ve emek harcamamak için bunu bir fonksiyonla çözmek en doğrusudur. Fonksiyonlar pek çok sonuç tipi çevirebilirler. Dizi, metin, bit, sayı, formül, başka bir fonksiyon veya nesne gibi sonuçları döndürebilirler. 

Burada bir nesne geri çevirmesini istiyoruz.

Örneğimiz şu olabilir:

function ny(nid)
{
return document.getElementById(nid);
}

Bunun kullanımı şu şekilde;

 

 
function ny(nid)
{
return document.getElementById(nid);
}
 
// gerektiği noktada
var mA = ny('musteri_adi').value;
// Şeklinde kullanılabilir.

 

Daha sonraki örneklerde farklı tip sonuçlar döndüren fonksiyonlara da örnek vereceğim.

co-scripts tag image nesne olusturmagetelementbyidreturn
ID:116 | Okunma:4037