Formlarda IBAN Alanı Tasarımı: Yapıştırma, Gruplama, Hata

İyi bir IBAN alanı, kullanıcının yapıştırdığı her makul biçimi kabul eder, hatayı ancak kullanıcı işini bitirdiğinde söyler ve hata mesajında neyin yanlış olduğunu açıkça yazar. Kulağa basit geliyor, ama uygulamada en çok bozulan şey otomatik gruplamadır: alan yazarken araya boşluk ekler, imleç sona fırlar ve kullanıcı ortadaki bir rakamı düzeltemez hâle gelir. Aşağıdaki kod bu sorunu çözüyor; Chromium üzerinde gerçek klavye ve pano yapıştırmasıyla sınadık.

Önce karar: yazarken gruplama yapmalı mısınız?

Bizim önerimiz, çoğu form için hayır. Kullanıcı boşluklu ya da boşluksuz yazsın, siz gönderimde temizleyin ve alanın altında dörderli gruplanmış bir önizleme gösterin. Bu yaklaşımda imleç sorunu hiç doğmaz, ekran okuyucular alanın değerini kullanıcının yazdığı gibi okur, kopyala-yapıştır davranışı bozulmaz. GOV.UK tasarım sisteminin doğrulama kalıbı da kod ve numara alanlarında boşluk gibi istenmeyen karakterleri hata saymak yerine yok saymayı öneriyor.

Yazarken gruplama, kullanıcının IBAN'ı bir kâğıttan ya da ekrandan bakarak elle girdiği durumlarda gerçekten yardımcı olur: dörtlü bloklar gözle karşılaştırmayı kolaylaştırır. Bunu seçerseniz yarım bir uygulama yapmayın. Aşağıda anlatılan üç durum, yani imleç konumu, boşluk silme ve yapıştırma sorunsuz çalışmıyorsa gruplamayı kaldırmak daha iyidir.

İşaretleme: doğru öznitelikler

<label for="iban">IBAN</label>
<p id="iban-ipucu">TR ile başlayan 26 karakter. Boşluklu ya da boşluksuz yazabilirsiniz.</p>
<p id="iban-hata" class="hata" hidden></p>
<input
  id="iban"
  name="iban"
  type="text"
  inputmode="text"
  autocapitalize="characters"
  autocorrect="off"
  spellcheck="false"
  aria-describedby="iban-ipucu iban-hata"
/>

Birkaç öznitelik bilinçli seçildi. inputmode="text" bırakıldı, çünkü IBAN harfle başlar ve sayısal klavyede TR yazılamaz. Formunuz yalnızca Türkiye IBAN'ı kabul ediyorsa, TR önekini alanın dışına sabit metin olarak koyup kalan 24 hane için inputmode="numeric" kullanabilirsiniz. GOV.UK tasarım sistemi de tamsayı alanları için type="number" yerine bu özniteliği öneriyor; type="number" hem baştaki sıfırları hem de bu uzunlukta bir sayının hassasiyetini riske atar. Önek dışarıdaysa, kullanıcının yapıştırdığı metnin başındaki TR'yi de atmayı unutmayın; yoksa değer TRTR14... olur.

spellcheck="false" yazım denetiminin IBAN'ın altını kırmızıyla çizmesini, autocapitalize="characters" ise mobil klavyede harflerin büyük gelmesini sağlar. autocorrect yalnızca bazı tarayıcılarda anlam taşır ama zararı yok. HTML standardındaki otomatik doldurma belirteçleri arasında IBAN için ayrılmış bir değer bulunmuyor; bu yüzden tarayıcının alanı doğru doldurmasını beklemeyin.

maxlength kullanmadık. Tarayıcı, sınırı aşan yapıştırmayı sessizce keser. Başında IBAN: etiketi ve aralarında boşluklar olan bir kopya bu sınıra takılırsa son haneler kaybolur ve kullanıcı nedenini anlamaz. Uzunluğu JavaScript tarafında, temizlenmiş değer üzerinden sınırlamak daha güvenli. Yer tutucu metni (placeholder) etiket yerine kullanmayın; kullanıcı yazmaya başladığında kaybolur ve ipucu da onunla gider. İpucunu görünür bir paragrafa koyup aria-describedby ile alana bağlayın.

Gruplama ve imleç: çalışan bir uygulama

const ALNUM = /[^A-Za-z0-9]/g;

function countAlnum(s) {
  return s.replace(ALNUM, "").length;
}

/**
 * Yazarken 4'erli gruplama yapar ve imleci doğru yere koyar.
 * prev: değişiklikten önceki alan değeri (boşluk silme durumunu anlamak için).
 */
function formatIbanInput(raw, caret, prev = "") {
  let text = raw;
  let pos = caret;
  // Kullanıcı yalnızca bir boşluğu sildiyse, önündeki karakteri silmek istemiştir.
  if (raw.length === prev.length - 1 && countAlnum(raw) === countAlnum(prev) && pos > 0) {
    text = raw.slice(0, pos - 1) + raw.slice(pos);
    pos -= 1;
  }
  // Yapıştırılan "IBAN: TR.." etiketini at (ülke kodu + 2 rakam izliyorsa).
  const label = text.match(/^\s*iban\s*:?\s*(?=[a-z]{2}\s*\d{2})/i);
  if (label) {
    text = text.slice(label[0].length);
    pos = Math.max(0, pos - label[0].length);
  }
  const alnumBefore = countAlnum(text.slice(0, pos));
  const clean = text.replace(ALNUM, "").toUpperCase().slice(0, 34);
  const value = clean.replace(/(.{4})(?=.)/g, "$1 ");
  let newCaret = 0;
  let seen = 0;
  while (newCaret < value.length && seen < Math.min(alnumBefore, clean.length)) {
    if (value[newCaret] !== " ") seen++;
    newCaret++;
  }
  return { value, caret: newCaret };
}

function bindIbanInput(input) {
  let prev = input.value;
  input.addEventListener("input", () => {
    const { value, caret } = formatIbanInput(input.value, input.selectionStart ?? input.value.length, prev);
    input.value = value;
    input.setSelectionRange(caret, caret);
    prev = value;
  });
}

Fonksiyonun çözdüğü üç sorun var. Birincisi imleç konumu. Değeri yeniden yazdığınız anda tarayıcı imleci alanın sonuna taşır. Çözüm, değişiklikten önce imlecin solunda kaç harf-rakam olduğunu saymak, yeni gruplanmış değerde aynı sayıda harf-rakamı geçip imleci oraya koymaktır. Boşlukları saymadığımız için, bir grubun ortasına rakam eklendiğinde ya da gruplar kaydığında imleç kullanıcının yazdığı karakterin hemen sağında kalır.

İkincisi boşluğu silme tuzağı. Kullanıcı bir grubun başındayken geri silme tuşuna basarsa yalnızca boşluğu siler. Formatlayıcı boşluğu hemen geri ekler ve tuş hiçbir şey yapmamış gibi görünür; kullanıcı sıkışır. Kod bu durumu, değerin bir karakter kısaldığı ama harf-rakam sayısının değişmediği an olarak tanıyor ve boşluğun solundaki karakteri siliyor. Bu kontrolü keydown yerine input olayında yapmanın bir sebebi var: bazı mobil sanal klavyeler basılan tuşun kimliğini güvenilir biçimde bildirmiyor, input olayı ise değişikliğin kendisini verir.

Üçüncüsü yapıştırma. WhatsApp mesajından ya da bir web sayfasından kopyalanan IBAN bazen IBAN: etiketiyle, bölünemez boşluklarla ve bazen sıfır genişlikli görünmez karakterlerle gelir. Harf-rakam dışındaki her şeyin atılması görünmez karakterleri temizler. Etiket ise yalnızca ardından ülke kodu ve iki rakam geliyorsa siliniyor; böylece bir kullanıcının harf harf yazdığı değer yanlışlıkla silinmez. Tarayıcıda pano üzerinden IBAN: TR14, bölünemez boşluk ve sıfır genişlikli boşluk içeren bir metin yapıştırdığımızda alan TR14 0001 0050 0123 4567 8901 23 değerini aldı ve imleç sonda kaldı. Kopyalarken numaranın başka hangi yollarla bozulabileceğini IBAN kopyalama hataları rehberi ayrıntılı anlatıyor.

Fonksiyon yalnızca biçimlendirir, doğrulamaz. Doğrulama için MOD 97 dahil tam kontrolü ayrı bir adımda yapın; bağımlılıksız bir sürümü JavaScript IBAN doğrulama kodu sayfasında var. İkisini ayırmak, gruplama mantığını doğrulama kurallarından bağımsız test etmenizi sağlar.

Canlı doğrulama ne zaman devreye girmeli?

Kullanıcı daha on karakter yazmışken "IBAN eksik" demek, henüz hata yapmamış birine hata göstermektir. GOV.UK doğrulama kalıbı bu konuda net: kullanıcı alandan ayrıldığında değil, formu göndermeye çalıştığında doğrulayın; satır içi canlı doğrulamayı yalnızca kullanıcı araştırması faydasını gösteriyorsa ekleyin.

Bizim uyguladığımız ara yol şu: hata mesajını yalnızca gönderimde gösteriyoruz. Olumlu geri bildirimi ise erken verebiliriz; temizlenmiş değer beklenen uzunluğa ulaşıp MOD 97'den geçtiğinde alanın altında "Biçim geçerli, banka koduna göre X Bankasına ait görünüyor" yazmak kullanıcıyı rahatsız etmez ve yanlış bankayı fark etmesini sağlayabilir. Bu mesajın hesap sahibini doğrulamadığını da aynı yerde söyleyin. Bu ayrımın neden önemli olduğunu geçerli IBAN, aktif hesap mı? rehberinde anlattık.

Hata mesajları: ne yanlış, nasıl düzelir?

WCAG 2.2'nin 3.3.1 başarı ölçütü otomatik algılanan girdi hatasının metinle tanımlanmasını, 3.3.3 ise düzeltme önerisi biliniyorsa kullanıcıya sunulmasını ister. IBAN için bu, "Geçersiz IBAN" gibi tek tip bir mesaj yerine nedene göre ayrışmış mesajlar demek:

"MOD 97" kullanıcı için anlamsız bir terimdir; mesajda değil, geliştirici logunda kalmalı. O ve I harflerinin sıfır ve bir ile karışması elle yazımda sık görülür. Türkiye IBAN'ında ülke kodundan sonra harf beklenmediği için bu öneriyi güvenle verebilirsiniz. Hangi karakterlerin karıştığını IBAN yazım kontrolü aracı işaretliyor. Değeri sizin yerinize sessizce düzeltmeyin; öneriyi gösterin, kararı kullanıcı versin.

Erişilebilirlik kontrol listesi

• Hata olduğunda alana aria-invalid="true" ekleyin, hata paragrafını görünür yapın ve aria-describedby ile bağlı kalsın.
• Gönderimde birden çok hata varsa sayfanın başında bir hata özeti gösterip klavye odağını oraya taşıyın; GOV.UK kalıbı bunu öneriyor.
• Hatayı yalnızca kırmızı çerçeveyle belirtmeyin; renk görmeyen kullanıcı için metin şart.
• Her tuş vuruşunda değişen doğrulama metnini aria-live bölgesine koymayın; ekran okuyucu kullanıcısı her karakterde yeni bir duyuru dinlemek zorunda kalır.

Alanı sıfırdan yazmak yerine sayfanıza hazır bir bileşen yerleştirmek isterseniz IBAN widget sayfasına bakın. Form gönderildikten sonra IBAN'ın nasıl saklanacağı ise ayrı bir tasarım konusu; IBAN veritabanında nasıl saklanmalı? yazısında şema, şifreleme ve loglama tarafını ele aldık.