Javascript İle Form Verisi Doğrulama Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Modern bir JavaScript geliştirme ortamı için herhangi bir ağır kurulum gerekmez. Tarayıcınızın geliştirici araçları (Console ve Elements sekmeleri) hata ayıklama süreçleri için yeterlidir. Çalışmalarınızı bir metin editörü (VS Code gibi) üzerinde yapmanız ve tarayıcı olarak Chrome, Firefox veya Edge'in güncel sürümlerini kullanmanız önerilir.

• Temel HTML5 bilgisi (form etiketleri, input tipleri).
• Modern JavaScript (ES6+) sözdizimi aşinalığı.
• Tarayıcı konsolunu kullanma becerisi.

Adım Adım Form Yapısını Oluşturma

Veri doğrulama işlemine başlamadan önce, HTML formunun semantik ve erişilebilir bir yapıda olması gerekir. Doğrulama yaparken novalidate özniteliğini kullanarak tarayıcının varsayılan doğrulama mekanizmasını devre dışı bırakacağız; böylece kendi özel JavaScript mantığımızı uygulayabiliriz.

  Kullanıcı Adı:
  
  

  Kaydı Tamamla

Bu yapıda, novalidate kullanarak tarayıcının kendi hata kutucuklarını engelledik. span etiketi ise JavaScript ile dinamik olarak hata mesajlarını göstereceğimiz alan olacak.

JavaScript ile Temel Doğrulama Mantığı

Form gönderilmeden önce submit olayını dinlemeli ve verileri kontrol etmeliyiz. Aşağıdaki örnekte, kullanıcının boş alan bırakıp bırakmadığını kontrol eden temel bir yapı kuruyoruz.

const form = document.getElementById('kayitFormu');
const kullaniciAdi = document.getElementById('kullaniciAdi');
const hataMesaji = document.getElementById('kullaniciHata');

form.addEventListener('submit', (event) => {
  if (kullaniciAdi.value.trim() === '') {
    event.preventDefault(); // Formun gönderilmesini engelle
    hataMesaji.textContent = 'Kullanıcı adı boş bırakılamaz.';
  }
});

Burada trim() metodunu kullanarak kullanıcının sadece boşluk karakteri girmesini engelliyoruz. event.preventDefault() metodu ise doğrulama başarısız olduğunda formun sunucuya gitmesini durdurur.

Düzenli İfadeler (Regex) ile Veri Formatı Kontrolü

E-posta adresi veya şifre karmaşıklığı gibi özel format gerektiren alanlarda Düzenli İfadeler (Regex) kullanılır. Bu, verinin beklenen desene uyup uymadığını anlamanın en hızlı yoludur.

const emailInput = document.getElementById('email');
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function epostaDogrula(email) {
  return emailRegex.test(email);
}

// Kullanımı:
if (!epostaDogrula(emailInput.value)) {
  console.error('Geçersiz e-posta formatı!');
}

Bu Regex deseni, standart bir e-posta formatını (kullanici@alanadi.com) kontrol eder. test() metodu, eşleşme varsa true, yoksa false döndürür.

Form Doğrulama Yöntemlerinin Karşılaştırılması

Güvenlik Uyarıları ve En İyi Pratikler

Kritik Uyarı: JavaScript ile yapılan doğrulama yalnızca kullanıcı deneyimini artırmak içindir. Asla tek güvenlik önlemi olarak kabul edilmemelidir. Tüm veriler sunucu tarafında (Node.js, PHP, Python vb.) mutlaka tekrar doğrulanmalıdır. İstemci tarafındaki doğrulamalar kötü niyetli kullanıcılar tarafından kolayca atlatılabilir.

XSS (Cross-Site Scripting) saldırılarını önlemek için kullanıcıdan gelen verileri asla doğrudan DOM'a innerHTML ile eklemeyin. Bunun yerine textContent kullanın. Ayrıca, sunucuya gönderdiğiniz verileri her zaman sanitize (temizleme) işleminden geçirin.

Dinamik Hata Yönetimi ve Geri Bildirim

Kullanıcı formu doldururken gerçek zamanlı geri bildirim almak, hata oranını ciddi oranda düşürür. input olayını dinleyerek kullanıcı yazarken doğrulama yapabiliriz.

kullaniciAdi.addEventListener('input', () => {
  if (kullaniciAdi.value.length < 3) {
    hataMesaji.textContent = 'En az 3 karakter girilmelidir.';
  } else {
    hataMesaji.textContent = '';
  }
});

Bu yaklaşım, kullanıcının "Gönder" butonuna basmasını beklemeden hatalarını düzeltmesine olanak tanır.

Sıkça Sorulan Sorular

JavaScript doğrulaması yeterli mi?

Hayır, JavaScript doğrulaması sadece kullanıcı deneyimi içindir. Sunucu tarafında doğrulama yapmak güvenlik için zorunludur.

Neden novalidate kullanıyoruz?

Tarayıcının varsayılan hata mesajlarını kendi özel tasarımımızla ve daha esnek kurallarla değiştirmek için bu özniteliği kullanırız.

Regex kullanmak zorunlu mu?

Zorunlu değildir ancak e-posta, telefon numarası veya şifre gibi desenlerin doğrulanmasında en etkili yöntemdir.

Hata mesajlarını nasıl erişilebilir yaparım?

Hata mesajı içeren span veya div elementlerine aria-live="polite" ve role="alert" özniteliklerini ekleyerek ekran okuyucuların bu mesajları seslendirmesini sağlayabilirsiniz.

Hangi durumlarda kütüphane kullanmalıyım?

Formunuz çok sayıda alana sahipse ve karmaşık doğrulama kuralları (örneğin: "şifre, kullanıcı adını içeremez") gerekiyorsa, Zod veya Yup gibi kütüphaneleri kullanmak kodun bakımını kolaylaştırır.

Form Doğrulama Süreçlerinde Performans Optimizasyonu

Büyük ölçekli uygulamalarda, özellikle çok sayıda girdi alanına sahip karmaşık formlarda, her tuş vuruşunda tetiklenen doğrulama fonksiyonları tarayıcı performansını olumsuz etkileyebilir. Kullanıcı deneyimini iyileştirmek ve gereksiz işlem yükünü azaltmak için "Debounce" ve "Throttle" tekniklerini kullanmak kritik öneme sahiptir.

Debounce yöntemi, kullanıcının yazmayı bırakmasından sonra belirli bir süre geçene kadar doğrulama fonksiyonunun çalışmasını engeller. Bu, özellikle sunucuya istek gönderilen asenkron doğrulamalarda (örneğin; kullanıcı adı müsaitlik kontrolü) sunucu yükünü ciddi oranda düşürür.

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

const validateEmail = debounce((email) => {
  console.log("Doğrulama yapılıyor: " + email);
  // Burada API çağrısı veya regex kontrolü yapılabilir
}, 500);

document.getElementById('email').addEventListener('input', (e) => {
  validateEmail(e.target.value);
});

Form Doğrulama Kodlarında Hata Ayıklama (Debugging) İpuçları

Karmaşık doğrulama mantıklarında, formun neden gönderilmediğini veya hata mesajlarının neden tetiklenmediğini anlamak zor olabilir. Tarayıcı geliştirici araçlarını (DevTools) etkin kullanarak süreci yönetebilirsiniz.

• Breakpoints Kullanımı: JavaScript dosyanızda doğrulama fonksiyonunun başladığı satıra bir breakpoint koyarak, değişkenlerin o anki değerlerini "Scope" panelinden inceleyin.
• Console.table(): Eğer formda çok sayıda alan varsa, form verilerini bir nesne olarak konsola yazdırmak yerine console.table(formData) komutuyla daha okunaklı bir tablo formatında görüntüleyin.
• Event Listener İzleme: "Elements" sekmesinde ilgili form elementine sağ tıklayıp "Break on" -> "Subtree modifications" seçeneğini işaretleyerek, DOM üzerinde hata mesajı eklenirken kodun nerede durduğunu gözlemleyin.

Ayrıca, form gönderimini geçici olarak durdurmak için event.preventDefault() metodunu kullanarak, formun sunucuya gitmesini engelleyip sadece doğrulama mantığınızı test edebilirsiniz.

İleri Seviye: Özel Doğrulama Kütüphaneleri ile Çalışmak

Kendi doğrulama motorunuzu yazmak öğretici olsa da, profesyonel projelerde standartları korumak adına Yup veya Zod gibi şema tabanlı doğrulama kütüphaneleri tercih edilir. Bu kütüphaneler, karmaşık iç içe geçmiş nesne yapılarını (nested objects) ve koşullu doğrulama kurallarını çok daha az kodla yönetmenizi sağlar.

Not: Kütüphane kullanırken, kütüphanenin sunduğu "Schema Validation" yapısının, HTML5'in yerel Constraint Validation API'si ile çakışmamasına dikkat edin. Genellikle bu tür kütüphaneler kullanılırken form etiketine novalidate özniteliği eklenmesi önerilir.

Aşağıdaki örnekte, bir şema tanımlayarak verinin nasıl doğrulanacağı gösterilmektedir:

// Basit bir şema örneği (kütüphane mantığı)
const userSchema = {
  username: (val) => val.length >= 3 || "Kullanıcı adı en az 3 karakter olmalı",
  age: (val) => val >= 18 || "18 yaşından büyük olmalısınız"
};

function validateForm(data) {
  const errors = {};
  for (let key in userSchema) {
    const result = userSchema[key](data[key]);
    if (result !== true) errors[key] = result;
  }
  return errors;
}

Sonuç

JavaScript ile form verisi doğrulama, modern web geliştirmenin temel taşlarından biridir. Bu rehberde, HTML5 ile yapıyı kurmayı, JavaScript ile mantık katmanını oluşturmayı ve kullanıcıya anlık geri bildirim vermeyi öğrendiniz. Unutmayın ki, yazılım geliştirmede en güvenli yaklaşım "savunmacı programlama"dır; yani istemci tarafında kullanıcıyı yönlendirirken, sunucu tarafında verinin güvenliğinden asla ödün vermemelisiniz.

Bir sonraki adım olarak, doğruladığınız verileri bir API'ye fetch metodu ile güvenli bir şekilde nasıl göndereceğinizi araştırmanızı öneririm. Form yönetimi konusunda uzmanlaşmak, sizi daha profesyonel ve hatasız uygulamalar geliştiren bir yazılımcı yapacaktır.

Kod güvenliği sorumluluk reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanırken, kullanıcı girdilerini her zaman sanitize edin ve sunucu tarafında doğrulamayı ihmal etmeyin.