JavaScript form doğrulama: hatayı gösterin, kullanıcıyı doğru alana götürün

Bir form hata verdiğinde ziyaretçi neyi düzeltmesi gerektiğini anlayabilmelidir. Yalnızca kırmızı kenarlık göstermek, özellikle ekran okuyucu kullanan veya renk farkını ayıramayan kişiler için yeterli değildir. Bu rehberde iki alanlı küçük bir demo hazırlıyoruz. Form adı ve e-posta biçimini kontrol edecek; hatalı ilk alana odaklanacak. Örnek hiçbir sunucuya veri göndermediği için başarılı kontrolde bunu açıkça söyleyecek.

1. Alanın amacı etiketinde yazsın

Yer tutucu metin kullanıcı yazmaya başlayınca kaybolabilir. Bu yüzden her alanın görünür bir etiketi olmalıdır. label ile input arasındaki ilişkiyi for ve id üzerinden kuruyoruz. Hata açıklamasını da aria-describedby ile alana bağlıyoruz. “Hatalı” gibi belirsiz bir mesaj yerine “En az iki karakterlik adınızı yazın” veya “Geçerli bir e-posta adresi yazın” demek sorunu daha somut anlatır.

2. İstemci kontrolünün sınırı

Tarayıcı doğrulaması kullanıcının hatasını hızlı fark etmesini sağlar. Ancak gerçek bir uygulamada sunucu tarafındaki kontrolü kaldırmaz. Kullanıcı tarayıcı kodunu değiştirebilir veya doğrudan API isteği gönderebilir. Örneğimiz bir iletişim formu demosudur; üyelik hesabı oluşturmaz, e-posta adresinin gerçekten kişiye ait olduğunu doğrulamaz ve mesaj teslim etmez. E-posta biçiminin geçerli olması adresin çalıştığı anlamına gelmez.

3. Tam demo kodu

Kodu form.html olarak kaydedip tarayıcıda açabilirsiniz. novalidate ile tarayıcının otomatik balonları yerine kendi mesajlarımızı kullanıyoruz; gerekli kuralları yine HTML özellikleriyle tanımlıyoruz. Böylece hata metni ve odak davranışı uygulamanın kontrolünde olur.

<!doctype html><html lang="tr"><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form doğrulama örneği</title>
<style>
body{font:18px/1.6 system-ui;max-width:600px;margin:32px auto;padding:0 20px}
label{display:block;margin-top:18px}input,button{font:inherit;padding:10px}
input{width:100%;box-sizing:border-box}input[aria-invalid=true]{border:2px solid #a21b1b}
.error{color:#a21b1b;min-height:1.5em;margin:4px 0}button{margin-top:20px}
:focus-visible{outline:3px solid #245acb;outline-offset:3px}
</style>
<h1>İletişim formu denemesi</h1>
<p>Bu demo veri göndermez.</p>
<form id="form" novalidate>
<label for="name">Adınız</label>
<input id="name" name="name" required minlength="2" maxlength="80" autocomplete="name" aria-describedby="name-error">
<p class="error" id="name-error"></p>
<label for="email">E-posta adresiniz</label>
<input id="email" name="email" type="email" required maxlength="254" autocomplete="email" aria-describedby="email-error">
<p class="error" id="email-error"></p>
<button type="submit">Kontrol et</button>
<p id="result" role="status"></p>
</form>
<script>
const form=document.getElementById('form');
const fields=[document.getElementById('name'),document.getElementById('email')];
const result=document.getElementById('result');
function validate(field){
  const value=field.value.trim();
  const valid=field.id==='name'?value.length>=2&&value.length<=80:field.checkValidity();
  field.setAttribute('aria-invalid',String(!valid));
  document.getElementById(field.id+'-error').textContent=valid?'':
    field.id==='name'?'Adınızı 2-80 karakter arasında yazın.':'Geçerli bir e-posta adresi yazın.';
  return valid;
}
form.addEventListener('submit',event=>{
  event.preventDefault();
  const invalid=fields.filter(field=>!validate(field));
  if(invalid.length){
    result.textContent=invalid.length+' alanı düzeltmeniz gerekiyor.';
    invalid[0].focus();
  }else{
    result.textContent='Demo doğrulama başarılı. Veri gönderilmedi.';
  }
});
fields.forEach(field=>field.addEventListener('input',()=>{
  if(field.getAttribute('aria-invalid')==='true')validate(field);
  result.textContent='';
}));
</script></html>

4. Hatalı örneklerle deneyin

Önce alanları boş bırakıp Kontrol et düğmesine basın. İki hata mesajı ve ilk alandaki odağı görmelisiniz. Sonra yalnızca bir harflik ad girin. Ardından uygun bir adla e-posta alanına deneme yazın. Hata mesajının ilgili alana ait olduğunu ve doğru veri yazınca temizlendiğini inceleyin. Boşluklardan oluşan adın geçerli kabul edilmemesi için ad kontrolünde trim kullanılıyor.

5. Klavyeyle akışı kontrol edin

Sayfayı açıp fare kullanmadan Tab ile alanlara geçin. Etiketler, odak çizgisi ve düğme erişilebilir olmalıdır. Hatalı gönderim sonrası odak ilk soruna dönmeli, kullanıcı yazdıklarını kaybetmemelidir. Formu hata verdiğinde tamamen sıfırlamak özellikle uzun mesajlarda büyük bir kullanım sorunu yaratır. Bu örnek değerleri korur. Ekran okuyucuyla denediğinizde alanın açıklamasının ve durum mesajının anlamlı duyulup duyulmadığını ayrıca kontrol edin.

6. Gerçek gönderime geçerken

Bir API eklendiğinde “Gönderiliyor”, “Gönderildi” ve “Gönderilemedi” durumlarını ayırın. Sunucu gerçekten başarı yanıtı vermeden mesaj gönderilmiş gibi gösterilmemelidir. Ağ hatasında kullanıcının metnini koruyun ve yeniden deneme imkânı verin. Sunucudan dönen alan hatalarını ilgili girişlerle eşleştirin. İstek sınırı veya servis arızası gibi sorunları “e-posta yanlış” diye göstermeyin; kullanıcı düzeltemeyeceği bir hata yüzünden aynı bilgiyi tekrar yazmamalıdır.

7. Son görünüm kontrolü

Telefon klavyesi açıkken hata metninin görüldüğünü, alanların ekrandan taşmadığını ve düğmenin rahat seçildiğini inceleyin. Otomatik doldurmayla gelen değerleri de deneyin. Uzun adlar, Türkçe harfler ve farklı e-posta biçimleri için aşırı dar kurallar koymayın. Bu örnekte basit doğrulama tercih ettik; gerçek iş kurallarınız varsa onları açık ve ölçülü biçimde ekleyin. Amaç formu zorlaştırmak değil, kullanıcının güvenle tamamlayabildiği bir akış oluşturmaktır.

İlgili okumalar

• FFmpeg ile videodan kapak karesi çıkarma: doğru anı seçme ve kalite kontrolü
• FFmpeg ile videoları liste üzerinden birleştirme: sahne sırası ve uyumluluk