Web sitelerinde bir hesaba giriş yaparken, bir ürünü sepete ekleyip satın alırken veya bir iletişim formu doldururken arka planda birçok işlem gerçekleşir. İnternetin erken dönemlerinde HTML formları, kullanıcıdan alınan verileri işlemek için doğrudan sunucuya (backend) gönderirdi ve bu işlem sırasında sayfanın tamamen yeniden yüklenmesi gerekirdi. Ancak modern web geliştirmede, JavaScript kullanarak bu formları sunucuya gitmeden önce tarayıcı tarafında (kullanıcının cihazında) kontrol edebilir ve sayfa yenilenmeden dinamik işlemler yapabiliriz.
JavaScript form işlemleri, kullanıcı deneyimini (UX) artırmanın ve sunucuya hatalı veri gönderimini engellemenin en etkili yoludur. Bu rehberde, bir formun JavaScript ile nasıl seçileceğini, form gönderim olaylarının nasıl yönetileceğini ve kullanıcı girdilerinin nasıl doğrulanacağını (validation) örneklerle pekiştirerek öğreneceğiz.
1. Form Gönderim (Submit) Olayını Yakalamak
Bir HTML formu normal şartlarda <form> etiketi kullanılarak oluşturulur ve action (verinin gönderileceği adres) ile method (gönderim yöntemi, örn: GET veya POST) niteliklerini barındırır. Formun içindeki <input type="submit"> butonuna basıldığında, form varsayılan olarak bu adrese yönlenir.
JavaScript ile formlara müdahale etmek için öncelikle bu gönderim olayını (submit event) yakalamamız gerekir. Bu işlem için en modern ve önerilen yöntem addEventListener() kullanmaktır.
<form id="kayitFormu">
<input type="text" id="kullaniciAdi" placeholder="Adınız">
<input type="submit" value="Gönder">
</form>
<script>
// Formu JavaScript içinde bir nesne (object) olarak seçiyoruz
const myForm = document.querySelector("#kayitFormu");
// Forma 'submit' olay dinleyicisi ekliyoruz
myForm.addEventListener("submit", function(event) {
console.log("Form gönderilmeye çalışıldı!");
});
</script>
Yukarıdaki kodda, HTML sayfasındaki formu benzersiz ID’sini kullanarak querySelector() metodu ile seçiyoruz ve bir değişkene atıyoruz. Ardından bu forma bir “submit” olay dinleyicisi ekliyoruz. Ancak kodu çalıştırdığınızda konsoldaki yazının anlık olarak görünüp kaybolduğunu ve sayfanın yenilendiğini fark edeceksiniz.
2. Varsayılan Davranışı Engellemek: preventDefault()
HTML formlarının doğası gereği, gönder butonuna tıklandığında sayfa verileri sunucuya iletmek üzere yenilenir. Eğer form doğrulama işlemini JavaScript ile sayfa yenilenmeden yapmak istiyorsanız, bu varsayılan (default) davranışı durdurmanız gerekir.
Bunun için olay (event) nesnesinin sahip olduğu preventDefault() metodu kullanılır. Bu metot, iptal edilebilir olan bir olayın varsayılan tarayıcı eyleminin gerçekleşmesini engeller.
myForm.addEventListener("submit", function(event) {
// Tarayıcının sayfayı yenilemesini engeller
event.preventDefault();
console.log("Form gönderimi durduruldu, artık JavaScript ile kontrol bizde.");
});
Bu sayede kullanıcının girdiği verileri inceleyebilir, hata varsa ekranda gösterebilir veya verileri asenkron (AJAX/Fetch) olarak sunucuya arka planda gönderebiliriz.
3. Girdi (Input) Değerlerini Okumak
Formun gönderilmesini durdurduktan sonraki adım, kullanıcının metin kutularına ne yazdığını okumaktır. Bir HTML girdi elemanının (input) içindeki veriyi, o elemanın .value (değer) özelliğine erişerek alabiliriz.
myForm.addEventListener("submit", function(event) {
event.preventDefault();
// Girdi alanını seçip değerini okuma
const kullaniciAdiInput = document.querySelector("#kullaniciAdi");
const girilenAd = kullaniciAdiInput.value;
console.log("Kullanıcının girdiği isim: " + girilenAd);
});
4. Form Doğrulama (Validation) İşlemleri
Kullanıcılardan alınan verilerin sunucuya gönderilmeden önce doğru formatta olup olmadığını kontrol etmeye “form doğrulama” (form validation) denir. Bu sayede eksik bilgileri veya hatalı şifreleri anında yakalayarak kullanıcıya bir hata mesajı gösterebiliriz.
Örneğin, kullanıcının ad alanını boş bırakıp bırakmadığını kontrol eden basit bir yapı kurabiliriz:
if (girilenAd === "") {
console.log("Hata: İsim alanı boş bırakılamaz!");
// Hata durumunda odaklanmayı input kutusuna geri verebiliriz
kullaniciAdiInput.focus();
}
Yukarıdaki mantık, kullanıcının alanları boş bırakmasını engellemek için idealdir. Daha gelişmiş kontroller için JavaScript’te farklı yöntemler bulunur:
- Uzunluk Kontrolü: Şifre gibi alanların belirli bir karakter uzunluğunda olmasını isteyebilirsiniz. Örneğin, girdi değerinin uzunluğunun 3’ten büyük ve 9’dan küçük olmasını sağlayacak bir mantıksal kontrol (
el.value.length > 3 && el.value.length < 9) kurarak şifrenin sadece 4 ile 8 karakter arasında olmasını şart koşabilirsiniz. - Düzenli İfadeler (Regex) İle E-posta Kontrolü: E-posta adresinin geçerli bir formatta ([email protected]) yazıldığını doğrulamak için “Düzenli İfadeler” (Regular Expressions / Regex) adı verilen desenler kullanılır. Regex kalıpları,
match()veyatest()gibi JavaScript metotları yardımıyla girdi değeriyle karşılaştırılır; sonuç geçerli isetrue, değilsefalsedöner.
5. Kullanıcı Deneyimini Artıran Diğer Form Olayları
Form doğrulamasını sadece “Gönder” butonuna tıklandığında değil, kullanıcı formu doldururken eş zamanlı olarak da yapabiliriz. Bunun için girdi kutularına özel olay dinleyicileri (event listeners) atanır:
onchange(Değişim Olayı): Bir girdi kutusunun içeriği değiştiğinde ve kullanıcı o kutudan odağını kaybettiğinde (başka bir yere tıkladığında) tetiklenir. Değer aynı kalırsa tetiklenmez.onblur(Odak Kaybetme Olayı): Bir obje veya girdi kutusu odağını kaybettiğinde (imleç o alandan çıktığında) değer değişmemiş olsa bile tetiklenir. Kullanıcı bir alanı boş geçip geçmediğini kontrol etmek için harikadır.onfocus(Odaklanma Olayı): İmleç girdi kutusuna girdiğinde ve kutu aktif hale geldiğinde tetiklenir.
Öğrendiklerimizi Birleştirelim: Tam Kapsamlı Form Örneği
Tüm bu konseptleri (DOM seçimi, preventDefault, .value okuma, Regex ile doğrulama) birleştiren eksiksiz bir form doğrulama uygulaması yazalım:
<!DOCTYPE html>
<html>
<body>
<form id="uyeKayitFormu">
<label>E-posta:</label>
<input type="text" id="email" name="email">
<br><br>
<label>Şifre:</label>
<input type="password" id="sifre" name="sifre">
<br><br>
<input type="submit" value="Kayıt Ol">
</form>
<div id="hataMesaji" style="color: red; margin-top: 10px;"></div>
<script>
const form = document.querySelector("#uyeKayitFormu");
const emailInput = document.querySelector("#email");
const sifreInput = document.querySelector("#sifre");
const hataGostergeci = document.querySelector("#hataMesaji");
form.addEventListener("submit", function(event) {
// 1. Sayfa yenilemesini durdur
event.preventDefault();
// Önceki hata mesajlarını temizle
hataGostergeci.textContent = "";
let hataVar = false;
// 2. Email Doğrulama (Regex ile)
// Geçerli bir e-posta formatı için regex deseni
let emailRegex = /([A-Za-z0-9._-]+@[A-Za-z0-9._-]+\.[A-Za-z0-9]+)\w+/;
if (!emailRegex.test(emailInput.value)) {
hataGostergeci.textContent += "Lütfen geçerli bir e-posta girin. ";
hataVar = true;
}
// 3. Şifre Uzunluğu Doğrulama
// Şifrenin 3 ile 8 karakter arasında olmasını istiyoruz
if (!(sifreInput.value.length > 3 && sifreInput.value.length < 9)) {
hataGostergeci.textContent += "Şifre 4 ile 8 karakter arasında olmalıdır! ";
hataVar = true;
}
// 4. Hata yoksa işlemi tamamla
if (!hataVar) {
console.log("Form başarıyla doğrulandı! E-posta:", emailInput.value);
// Burada fetch() veya AJAX kullanarak veriyi güvenle backend'e iletebilirsiniz.
}
});
</script>
</body>
</html>
Sonuç
JavaScript ile form işlemleri, statik web sayfalarını etkileşimli (interactive) web uygulamalarına dönüştürmenin kilit noktalarından biridir. Kullanıcı girdilerini form gönderilmeden önce, yani istemci (client) tarafında yakalamak ve düzenlemek, hem uygulamanızın güvenliğini destekler hem de ziyaretçilerinize pürüzsüz bir deneyim sunar. preventDefault() mantığını kavramak ve elementlerin .value özelliklerini onchange veya submit gibi olaylarla entegre bir şekilde okumak, JavaScript serüveninizde sizi çok daha profesyonel bir seviyeye taşıyacaktır. Form yeteneklerinizi geliştirmek için kendi formlarınızı yaratıp Regex testleri ve farklı hata mesajı tasarımları oluşturarak bol bol pratik yapmayı unutmayın!
