Form Doğrulama JavaScript ile

iyl 13, 2026 OP

Mövzunu Açan #0

Form Doğrulama JavaScript ile

Merhaba arkadaşlar,

Bugün web geliştirmenin en temel, belki de en kritik konularından birine, form doğrulamaya odaklanmak istiyorum. Özellikle de JavaScript ile istemci tarafı (client-side) doğrulamayı nasıl ele alacağımız, püf noktaları ve sıkça yapılan hatalar üzerine derinlemesine konuşacağız. Kullanıcı deneyimi, veri bütünlüğü ve güvenlik üçgeninde form doğrulamanın ne denli vazgeçilmez olduğunu biliyoruz, değil mi? Ama gelin görün ki, bazen aceleci davranıp ya eksik bırakıyoruz ya da sadece sunucu tarafına güveniyoruz... Bu da hem kullanıcıyı yoruyor hem de sunucuyu gereksiz yüke sokabiliyor.

Neden İstemci Tarafı Doğrulama Bu Kadar Önemli?

İstemci tarafı doğrulama, bir formun gönderilmeden önce tarayıcıda kontrol edilmesidir. Bunun en büyük avantajı, kullanıcıya anında geri bildirim sağlamasıdır. Düşünsenize, bir form dolduruyorsunuz, "Gönder" butonuna basıyorsunuz ve sayfa yenilenip "E-posta adresiniz geçersiz" hatasıyla geri dönüyorsunuz... Sinir bozucu, değil mi? İşte tam da bu noktada JavaScript devreye giriyor. Kullanıcının hatalarını henüz formu göndermeden, hatta bazen alanları doldururken bile fark etmesini sağlayarak hem zaman kazandırır hem de kullanıcı deneyimini inanılmaz derecede iyileştirir. Ayrıca, sunucuya gereksiz ve hatalı veri yükünü azaltarak sunucu kaynaklarının daha verimli kullanılmasına yardımcı olur. Yani, sadece bir "güzellik" değil, aynı zamanda bir performans ve kullanılabilirlik meselesi.

Temel Doğrulama Yöntemleri: HTML5 ve JavaScript'in Dansı

Modern web geliştirme dünyasında HTML5, doğrulama konusunda bize harika yerleşik özellikler sunuyor. required, type="email", minlength, maxlength, pattern gibi nitelikler sayesinde temel doğrulamaları çok az JavaScript koduyla hatta hiç kod yazmadan bile yapabiliyoruz. Örneğin:

CODE

12345678910111213

    Kullanıcı Adı:
    
    
    E-posta:
    
    
    Şifre:
    
    
    Gönder

Burada required ile alanın boş bırakılamayacağını, type="email" ile e-posta formatında olması gerektiğini, minlength ve maxlength ile de karakter sınırlamalarını belirtmiş olduk. Tarayıcılar bu niteliklere göre varsayılan hata mesajları gösterirler. Ama bu yeterli mi? Çoğu zaman hayır. Tarayıcıların varsayılan mesajları her zaman istediğimiz gibi olmayabilir veya daha karmaşık iş mantıklarını (örneğin iki şifre alanının birbiriyle eşleşmesi) kontrol edemezler. İşte bu noktada JavaScript'in gücüne başvurmamız gerekiyor.

Bir formun gönderilmesini engellemek ve kendi doğrulama mantığımızı uygulamak için genellikle formun submit olayını dinleriz:

CODE

1234567891011121314151617181920212223242526272829303132333435363738
document.getElementById('myForm').addEventListener('submit', function(event) {
    // Form gönderimini engelle
    event.preventDefault(); 
    
    let username = document.getElementById('username').value;
    let email = document.getElementById('email').value;
    let password = document.getElementById('password').value;
    
    let isValid = true;
    let errorMessages = [];

    // Kullanıcı adı kontrolü
    if (username.length < 5 || username.length > 20) {
        errorMessages.push("Kullanıcı adı 5 ile 20 karakter arasında olmalıdır.");
        isValid = false;
    }

    // E-posta kontrolü (daha detaylı regex ile yapılabilir)
    if (!email.includes('@') || !email.includes('.')) { // Basit bir kontrol
        errorMessages.push("Geçerli bir e-posta adresi giriniz.");
        isValid = false;
    }

    // Şifre kontrolü
    if (password.length < 8) {
        errorMessages.push("Şifre en az 8 karakter olmalıdır.");
        isValid = false;
    }

    if (!isValid) {
        alert("Formda hatalar var:\n" + errorMessages.join('\n'));
        // Hataları kullanıcıya gösteren daha güzel bir UI burada olabilir
    } else {
        alert("Form başarıyla gönderildi!");
        // event.target.submit(); // Formu programatik olarak gönder
    }
});

Bu örnek, temel bir JavaScript doğrulama iskeleti sunuyor. event.preventDefault() ile varsayılan gönderim davranışını durdurup, kendi kontrollerimizi yapıyoruz. Hatalar varsa, kullanıcıya bildirip gönderimi engelliyoruz.

İleri Düzey Doğrulama: Regex ve Özel Kurallar

Gerçek dünya senaryolarında sadece boş kontrolü veya uzunluk kontrolü yeterli olmaz. Daha karmaşık desenleri doğrulamamız gerekir. İşte burada Regular Expressions (Regex) imdadımıza yetişir. E-posta formatları, telefon numaraları, güçlü şifre desenleri gibi birçok yapıyı Regex ile kolayca kontrol edebiliriz.

E-posta Doğrulama: Yukarıdaki basit includes kontrolü yerine daha sağlam bir Regex:

CODE

123456
function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}
// Kullanım: if (!isValidEmail(email)) { ... }

Güçlü Şifre Doğrulama: En az 8 karakter, en az bir büyük harf, bir küçük harf, bir sayı ve bir özel karakter içeren bir şifre için:

CODE

123456
function isStrongPassword(password) {
    const strongRegex = new RegExp("^(?=.[i][a-z])(?=.[/i][A-Z])(?=.[i][0-9])(?=.[/i][!@#\$%\^&\*])(?=.{8,})");
    return strongRegex.test(password);
}
// Kullanım: if (!isStrongPassword(password)) { ... }

Şifre Tekrarı Kontrolü: İki şifre alanının birbiriyle eşleştiğinden emin olmak:

CODE

12345678
let password = document.getElementById('password').value;
let confirmPassword = document.getElementById('confirmPassword').value;

if (password !== confirmPassword) {
    errorMessages.push("Şifreler eşleşmiyor.");
    isValid = false;
}

Bu tür özel kuralları kendi doğrulama fonksiyonlarınızla bir araya getirerek çok daha sağlam bir yapı kurabilirsiniz. Unutmayın, Regex'ler güçlüdür ama bazen okunması ve bakımı zor olabilir. Bu yüzden her zaman en basit Regex'i kullanmaya çalışın veya karmaşık durumlarda birden fazla kontrolü birleştirin.

Gerçek Zamanlı Doğrulama ve Kullanıcı Deneyimi

Kullanıcıların formu doldururken anında geri bildirim alması, form terk oranlarını düşürmek için kritik öneme sahiptir. Bunu genellikle alanlardan odak çıkıldığında (blur olayı) veya kullanıcı yazı yazarken (input veya keyup olayları) tetikleyerek yaparız.

CODE

123456789101112131415
document.getElementById('email').addEventListener('blur', function() {
    let emailInput = this;
    let email = emailInput.value;
    let errorDisplay = document.getElementById('emailError'); // Hata mesajını göstereceğimiz bir div

    if (!isValidEmail(email)) {
        errorDisplay.textContent = "Lütfen geçerli bir e-posta adresi girin.";
        emailInput.classList.add('is-invalid'); // CSS ile kırmızı kenarlık vb.
    } else {
        errorDisplay.textContent = "";
        emailInput.classList.remove('is-invalid');
        emailInput.classList.add('is-valid'); // CSS ile yeşil kenarlık vb.
    }
});

Bu yaklaşım, kullanıcı bir alanı doldurmayı bitirdiğinde hemen o alanın doğru olup olmadığını gösterir. keyup gibi olaylarla daha da anında geri bildirim sağlayabilirsiniz, ancak bu bazen aşırıya kaçabilir ve kullanıcıyı rahatsız edebilir. Örneğin, bir kullanıcı adı girerken her tuş basımında "Kullanıcı adı çok kısa" mesajını görmek yerine, belirli bir karakter sayısına ulaşıldığında veya odak kaybedildiğinde hata mesajı göstermek daha mantıklı olabilir. Deneyimle sabittir ki, bu dengeyi iyi kurmak gerekiyor.

Hata Mesajları ve Kullanıcı Arayüzü

Hata mesajları açık, anlaşılır ve kullanıcıya ne yapması gerektiğini anlatan nitelikte olmalıdır. Sadece "Hata

Oxşar mövzular

Məzmunu şikayət et