JavaScript Form Validation (Form Doğrulama)

Form doğrulama, kullanıcıdan gelen verilerin eksiksiz ve geçerli olmasını sağlar. İyi bir doğrulama sistemi iki aşamalıdır: 1) Anlık Kontrol: Kullanıcı yazarken veya kutudan çıkınca (blur). 2) Son Kontrol: Form gönderilmeden hemen önce (submit).

1) Profesyonel Form Doğrulama Mantığı

Modern bir doğrulama sürecinde alert() kullanmak yerine, hata mesajlarını ilgili kutucuğun hemen altına yazdırmak en iyi kullanıcı deneyimini sağlar.

const frm = document.querySelector("#kayitFormu");

frm.addEventListener("submit", function(event) {
    let hatalar = [];
    
    // 1. Boş Alan Kontrolü
    const ad = document.querySelector("#ad").value;
    if (ad.length < 3) {
        hatalar.push("Ad en az 3 karakter olmalıdır.");
    }

    // 2. E-posta Format Kontrolü (Regex)
    const eposta = document.querySelector("#email").value;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(eposta)) {
        hatalar.push("Geçerli bir e-posta adresi giriniz.");
    }

    // 3. Şifre Gücü Kontrolü
    const sifre = document.querySelector("#sifre").value;
    if (sifre.length < 6) {
        hatalar.push("Şifre en az 6 karakter olmalıdır.");
    }

    // Eğer hata varsa formu göndermeyi durdur
    if (hatalar.length > 0) {
        event.preventDefault();
        alert(hatalar.join("\n")); // Gerçek projede bunu HTML'e yazdırın.
    }
});

Doğrulama İpuçları ve Püf Noktalar

Özet

• Kullanıcıyı anında bilgilendirmek (Real-time validation) form terk etme oranını düşürür.
• Hata mesajları açık, net ve yapıcı olmalıdır (Örn: "Hata" yerine "Şifreniz en az bir rakam içermeli").
• Doğrulama başarılı olduğunda butonu görsel olarak (renk değişimi vb.) desteklemek güven verir.