Html & Css İle Özelleştirilebilir Bir İndikatörlü Form Doğrulama Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için modern bir tarayıcı (Chrome, Firefox veya Edge'in güncel sürümleri) ve bir kod editörü (VS Code önerilir) yeterlidir. 2026 yılı standartlarında, CSS'in "Grid" ve "Flexbox" özelliklerini, ayrıca "Pseudo-classes" (sözde sınıflar) yapısını etkin kullanacağız.

• HTML5: Form yapısının iskeletini oluşturmak için.
• CSS3: İndikatörlerin görselleştirilmesi ve animasyonlar için.
• JavaScript (ES6+): Form verisinin doğrulanması ve CSS sınıflarının dinamik yönetimi için.

Adım 1: HTML Form İskeletini Oluşturma

Form doğrulama sürecinin ilk adımı, verilerin girileceği alanları doğru bir şekilde tanımlamaktır. Burada input etiketlerini ve indikatörlerin görüneceği span veya div yapılarını hazırlıyoruz.

  

    Kullanıcı Adı:
    
    
  

Burada id seçicileri, JavaScript ile bu alanlara erişmemizi sağlayacak anahtarlardır. required özniteliği, tarayıcının yerleşik doğrulamasını tetiklese de, biz kendi özelleştirilmiş CSS indikatörlerimizi kullanacağız.

Adım 2: CSS ile İndikatörlerin Tasarımı

İndikatörlerin görsel olarak kullanıcıya "doğru" veya "yanlış" mesajını vermesi gerekir. CSS değişkenlerini kullanarak renkleri merkezi bir yerden yönetebiliriz.

:root {
  --hata-rengi: #ff4d4d;
  --basari-rengi: #2ecc71;
}

.indikator {
  display: block;
  font-size: 0.8rem;
  margin-top: 5px;
  height: 15px;
}

.hata { color: var(--hata-rengi); }
.basari { color: var(--basari-rengi); }

Bu CSS yapısı, .hata ve .basari sınıfları eklendiğinde indikatörün rengini otomatik olarak değiştirecektir. Bu, kullanıcıya görsel bir hiyerarşi sunar.

Adım 3: JavaScript ile Doğrulama Mantığını Yazma

Form doğrulama için input olayını dinlemek en verimli yöntemdir. Kullanıcı her tuşa bastığında, girilen veriyi kontrol eden bir fonksiyon çalıştıracağız.

const isimInput = document.getElementById('kullaniciAdi');
const isimIndikator = document.getElementById('isimIndikator');

isimInput.addEventListener('input', () => {
  if (isimInput.value.length < 3) {
    isimIndikator.textContent = "En az 3 karakter giriniz.";
    isimIndikator.className = "indikator hata";
  } else {
    isimIndikator.textContent = "Geçerli isim.";
    isimIndikator.className = "indikator basari";
  }
});

Bu kod bloğu, kullanıcı yazmaya başladığı anda devreye girer. Eğer karakter sayısı 3'ten azsa hata mesajı, fazlaysa başarı mesajı gösterilir.

Adım 4: Şifre Güçlülüğü İndikatörü Ekleme

Kullanıcıların güvenli şifreler oluşturmasını sağlamak için bir "Güçlülük İndikatörü" eklemek, modern web formlarının vazgeçilmezidir. Aşağıdaki örnekte Regex (Düzenli İfadeler) kullanarak şifre karmaşıklığını kontrol ediyoruz.

const sifreInput = document.getElementById('sifre');
const guclulukIndikator = document.getElementById('gucluluk');

sifreInput.addEventListener('input', () => {
  const deger = sifreInput.value;
  const gucluRegex = /^(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/;

  if (gucluRegex.test(deger)) {
    guclulukIndikator.textContent = "Güçlü Şifre";
    guclulukIndikator.style.color = "green";
  } else {
    guclulukIndikator.textContent = "Zayıf: Büyük harf ve rakam içermeli.";
    guclulukIndikator.style.color = "red";
  }
});

Regex kullanımı, şifre güvenliğini sağlamak için hızlı ve etkili bir yöntemdir. (?=.*[A-Z]) ifadesi, en az bir büyük harf gerektiğini belirtir.

Karşılaştırma: Yerleşik Doğrulama vs. Özelleştirilmiş İndikatör

Adım 5: Güvenlik ve İleri Seviye İpuçları

Form doğrulama, sadece kullanıcı deneyimi için değil, veri güvenliği için de kritiktir. Ancak unutmayın ki, istemci tarafında (JavaScript) yapılan doğrulama asla tek başına yeterli değildir.

Kritik Uyarı: İstemci tarafında yapılan doğrulamalar (JavaScript), kullanıcı tarafından manipüle edilebilir. Sunucu tarafında (Backend) veriyi mutlaka tekrar doğrulamalı ve temizlemelisiniz (Sanitization). XSS (Cross-Site Scripting) saldırılarına karşı kullanıcı girdilerini her zaman filtreleyin.

Ayrıca, form gönderilmeden önce tüm alanların doğruluğunu kontrol eden bir "Submit" engelleyici fonksiyon eklemek, veritabanına hatalı veri girmesini engeller.

document.getElementById('kayitFormu').addEventListener('submit', (e) => {
  if (isimInput.value.length < 3) {
    e.preventDefault(); // Formun gönderilmesini engelle
    alert("Lütfen formu eksiksiz doldurun.");
  }
});

Sıkça Sorulan Sorular

CSS ile sadece CSS kullanarak doğrulama yapılabilir mi?

Evet, :valid ve :invalid sözde sınıfları ile JavaScript kullanmadan da basit doğrulama mesajları gösterebilirsiniz, ancak karmaşık mantıklar için JavaScript şarttır.

Neden özel indikatör kullanmalıyım?

Tarayıcıların varsayılan hata mesajları tasarımınızla uyumsuz olabilir ve özelleştirilemez. Özel indikatörler markanızın kimliğini yansıtır.

Regex nedir ve neden gereklidir?

Regex, metin içindeki desenleri (örneğin e-posta formatı veya şifre kuralları) eşleştirmek için kullanılan güçlü bir araçtır.

Mobil cihazlarda bu yapı nasıl çalışır?

CSS Flexbox ve Grid yapıları sayesinde, indikatörler mobil ekranlarda da esnek bir şekilde konumlanacaktır.

Form verisi güvenliği için başka ne yapmalıyım?

Sunucu tarafında SQL Injection'a karşı "Prepared Statements" (Hazırlanmış İfadeler) kullanmalı ve şifreleri asla düz metin olarak saklamayıp, uygun algoritmalarla (argon2, bcrypt) hashlemelisiniz.

Form Doğrulama Süreçlerinde Performans Optimizasyonu

Kullanıcı deneyimini iyileştirmek için yazdığınız doğrulama mantığı, özellikle çok sayıda girdi alanına sahip karmaşık formlarda tarayıcı performansını etkileyebilir. JavaScript ile her tuş vuruşunda (keyup) çalışan fonksiyonlar, gereksiz DOM manipülasyonlarına yol açabilir. Bu durumu engellemek için "Debounce" tekniğini kullanmak en profesyonel yaklaşımdır.

Debounce, kullanıcının yazmayı bırakmasını belirli bir süre bekledikten sonra doğrulama fonksiyonunu tetikleyerek işlem yükünü minimize eder.

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

const validateInput = debounce((event) => {
  console.log("Doğrulama işlemi çalıştırıldı:", event.target.value);
  // Buraya doğrulama mantığınızı ekleyin
}, 300);

document.getElementById('password').addEventListener('input', validateInput);

Doğrulama Sistemlerinde Hata Ayıklama ve Test Süreçleri

Geliştirdiğiniz özel indikatörlerin farklı tarayıcılarda ve ekran boyutlarında tutarlı çalışıp çalışmadığını doğrulamak için sistematik bir test süreci izlemelisiniz. Hata ayıklama aşamasında tarayıcı konsolunu ve "Elements" panelini aktif kullanmak, CSS sınıflarının dinamik olarak eklenip eklenmediğini görmenizi sağlar.

Test Edilmesi Gereken Temel Senaryolar

• Boş Gönderim: Kullanıcı hiçbir şey girmeden "Gönder" butonuna bastığında indikatörlerin hata durumuna geçip geçmediği.
• Hızlı Yazma: Kullanıcı çok hızlı veri girişi yaptığında indikatörlerin güncellenme hızı.
• Kopyala-Yapıştır: Kullanıcı veriyi klavye ile yazmak yerine yapıştırdığında (paste event) doğrulamanın tetiklenip tetiklenmediği.
• Odak Kaybı (Blur): Kullanıcı alandan çıktığında doğrulamanın son durumu koruyup korumadığı.

Aşağıdaki tablo, doğrulama sisteminizin başarısını ölçmek için kullanabileceğiniz bir kontrol listesidir:

Bu testleri manuel yapmanın yanı sıra, Cypress veya Playwright gibi modern uçtan uca (E2E) test araçlarını kullanarak formunuzun farklı tarayıcılardaki davranışlarını otomatize edebilirsiniz. Bu, projenizin uzun vadeli bakım süreçlerinde oluşabilecek hataları erkenden tespit etmenize olanak tanır.

Sonuç

Html & Css ile özelleştirilebilir bir indikatörlü form doğrulama yapmak, kullanıcılarınıza daha profesyonel bir deneyim sunmanın anahtarıdır. Bu rehberde öğrendiğiniz yöntemleri, kendi projelerinizde formları daha etkileşimli hale getirmek için hemen uygulamaya başlayabilirsiniz. Bir sonraki adım olarak, bu doğrulama mantığını bir "Form Validation" kütüphanesi haline getirerek projeleriniz arasında yeniden kullanılabilir bir modül oluşturmayı deneyebilirsiniz.