JavaScript ile Form Doğrulama Nasıl Yapılır? | Adım Adım Rehber

📋 JavaScript ile Form Doğrulamanın Avantajları

JavaScript form doğrulama sadece teknik bir zorunluluk değil, aynı zamanda kullanıcı deneyimini ciddi şekilde iyileştiren bir adımdır. İşte bazı temel avantajları:

✅ Hızlıdır:

Kullanıcıdan gelen veriler sunucuya gitmeden önce tarayıcıda kontrol edilir. Bu da anında geri bildirim sağlar.

✅ Kullanıcı Dostudur:

Kullanıcıya, girdiği verilerin yanlış olduğunu o anda gösterebilirsiniz. Örneğin “Lütfen geçerli bir e-posta adresi girin.”

✅ Sunucu Yükünü Azaltır:

Sunucuya hatalı veri gitmediği için gereksiz işlem yapılmaz.

✅ Veri Kalitesini Artırır:

Yalnızca geçerli ve düzgün biçimde girilmiş veriler gönderilir.

💡 Temel HTML Formu Hazırlama

JavaScript ile doğrulamaya geçmeden önce, üzerinde çalışacağımız basit bir HTML formuna ihtiyacımız var:

html

<form id="contactForm">
  <label for="name">Ad Soyad:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">E-posta:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Şifre:</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">Gönder</button>
</form>

🛠️ Bu formda üç alan bulunuyor:

• Ad Soyad

• E-posta

• Şifre

🔍 JavaScript ile Form Alanlarını Kontrol Etme

Şimdi her bir alanı JavaScript kullanarak nasıl kontrol edeceğimize bakalım.

1. Formu Dinleyin

Formun gönderilmesini dinlemek için submit olayını kullanın:

javascript

document.getElementById('contactForm').addEventListener('submit', function (e) {
  e.preventDefault(); // Formun otomatik gönderilmesini engelle

  // Alanları çağır
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  const password = document.getElementById('password').value;

  // Hataları burada kontrol edeceğiz...
});

2. Boş Alan Kontrolü

javascript

if (name === '') {
  alert('❌ Ad Soyad boş bırakılamaz!');
  return;
}

3. E-posta Formatı Kontrolü

javascript

const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;

if (!emailRegex.test(email)) {
  alert('📧 Geçerli bir e-posta adresi giriniz.');
  return;
}

4. Şifre Güvenliği Kontrolü

javascript

if (password.length < 8) {
  alert('🔐 Şifreniz en az 8 karakter olmalıdır.');
  return;
}

✅ Tüm kontroller geçerse, form başarıyla gönderilebilir:

javascript

alert('✅ Form başarıyla gönderildi!');

🧠 İpuçları & En İyi Uygulamalar

• 🧪 Regex kullanımı: E-posta ve şifre gibi alanlarda düzenli ifadeler (regex) ile daha sağlam kontroller yapabilirsiniz.

• 🔁 Geri bildirim kutuları: Her hatada alert() yerine formun hemen yanında görsel uyarılar vermek kullanıcı dostudur.

• 🧩 Kütüphane kullanımı: Eğer büyük bir formunuz varsa Parsley.js veya JustValidate gibi kütüphanelerle işinizi kolaylaştırabilirsiniz.

• 🌐 Çoklu dil desteği: Hataları kullanıcıya göstermek için çoklu dil destekli sistemler tercih edilebilir.