Emre

Emre

WFN Üye
Konular
1,664
Mesajlar
1,760
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 4 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
İstemci tarafında form doğrulamak için alan değerlerini gönderme anında okuyup kurallara göre kontrol edin; geçersiz alanlarda hata mesajı gösterin, formun gönderilmesini durdurun ve geçerli olduğunda veriyi işleyin. Ancak JavaScript doğrulaması tek başına güvenlik sağlamaz. Tarayıcı dışında gönderilen istekler JavaScript’i çalıştırmayabileceği için aynı kurallar sunucu tarafında da yeniden uygulanmalıdır.

Form doğrulamanın temel akışı​


Bir form doğrulamasında genellikle şu sıra izlenir:
  1. Formun gönderilme olayını yakalayın.
  2. Alan değerlerini alın ve gereksiz boşlukları temizleyin.
  3. Boş bırakma, biçim, uzunluk veya değer aralığı gibi kuralları uygulayın.
  4. Geçersiz alanın hata mesajını gösterin ve gönderme işlemini durdurun.
  5. Tüm alanlar geçerliyse formun gönderilmesine veya verinin sunucuya gönderilmesine izin verin.
Aşağıdaki örnekte e-posta adresi, parola ve parola tekrarı kontrol edilir. HTML formunu sayfaya ekledikten sonra JavaScript kodunu ayrı bir dosyada ya da sayfanın sonunda çalıştırabilirsiniz.

HTML: 
<form id="registerForm" novalidate>
  <label for="email">E-posta</label>
  <input id="email" name="email" type="email" autocomplete="email">
  <small id="emailError"></small>

  <label for="password">Parola</label>
  <input id="password" name="password" type="password" autocomplete="new-password">
  <small id="passwordError"></small>

  <label for="passwordAgain">Parola tekrarı</label>
  <input id="passwordAgain" name="passwordAgain" type="password" autocomplete="new-password">
  <small id="passwordAgainError"></small>

  <button type="submit">Kayıt ol</button>
</form>

<script src="form.js" defer></script>

novalidate özniteliği, bu örnekte tarayıcının varsayılan uyarıları yerine kendi hata mesajlarımızı göstermek için kullanılır. Kullanmak istemezseniz kaldırabilirsiniz; required, type="email" ve minlength gibi HTML kuralları tarayıcı tarafından otomatik olarak da denetlenebilir.

JavaScript: 
const form = document.querySelector('#registerForm');

const email = document.querySelector('#email');
const password = document.querySelector('#password');
const passwordAgain = document.querySelector('#passwordAgain');

const emailError = document.querySelector('#emailError');
const passwordError = document.querySelector('#passwordError');
const passwordAgainError = document.querySelector('#passwordAgainError');

function clearErrors() {
  emailError.textContent = '';
  passwordError.textContent = '';
  passwordAgainError.textContent = '';

  email.removeAttribute('aria-invalid');
  password.removeAttribute('aria-invalid');
  passwordAgain.removeAttribute('aria-invalid');
}

function setError(input, errorElement, message) {
  errorElement.textContent = message;
  input.setAttribute('aria-invalid', 'true');
}

form.addEventListener('submit', function (event) {
  event.preventDefault();
  clearErrors();

  const emailValue = email.value.trim();
  const passwordValue = password.value;
  const passwordAgainValue = passwordAgain.value;
  let isValid = true;

  if (emailValue === '') {
    setError(email, emailError, 'E-posta adresi zorunludur.');
    isValid = false;
  } else if (!email.validity.valid) {
    setError(email, emailError, 'Geçerli bir e-posta adresi yazın.');
    isValid = false;
  }

  if (passwordValue.length < 8) {
    setError(password, passwordError, 'Parola en az 8 karakter olmalıdır.');
    isValid = false;
  }

  if (passwordAgainValue !== passwordValue) {
    setError(passwordAgain, passwordAgainError, 'Parolalar eşleşmiyor.');
    isValid = false;
  }

  if (!isValid) {
    const firstInvalidField = form.querySelector('[aria-invalid="true"]');
    firstInvalidField?.focus();
    return;
  }

  // Bu noktada istemci tarafı kontrolleri geçildi.
  // Gerçek uygulamada veriyi sunucuya gönderin.
  console.log('Form doğrulandı:', {
    email: emailValue,
    password: passwordValue
  });
});

Formu gönderdiğinizde geçersiz bir e-posta yazarsanız e-posta alanının altında hata mesajı görünür ve odak ilk hatalı alana taşınır. Parola sekiz karakterden kısa olduğunda parola alanı, iki parola farklı olduğunda ise parola tekrarı alanı işaretlenir. Bütün kontroller geçerse isValid değeri true kalır ve uygulamanın veri gönderme adımına geçilir.

Bu örnekte event.preventDefault() formun normal gönderilmesini geçici olarak durdurur. Gerçek uygulamada doğrulama başarılı olduktan sonra veriyi fetch() ile API’ye gönderebilir veya normal form gönderimini kullanabilirsiniz. API’ye gönderirken parolayı tarayıcı konsoluna yazdırmayın ve sunucu yanıtında dönen hata mesajlarını da kullanıcıya ham hâliyle göstermeyin.

HTML doğrulaması, JavaScript ve sunucu doğrulaması​


Form kurallarını hangi katmanda uygulayacağınızı seçerken her katmanın görevini ayırmak gerekir. HTML doğrulaması hızlı ve temel kontroller için, JavaScript kullanıcıya anında geri bildirim vermek için, sunucu doğrulaması ise güvenilir son kontrol için kullanılır.
KatmanUygun olduğu işSınırı
HTMLZorunlu alan, e-posta biçimi, minimum ve maksimum uzunlukKullanıcı tarafından devre dışı bırakılabilir veya atlanabilir
JavaScriptAnında hata göstermek, alanlar arası ilişkiyi kontrol etmekKod çalıştırılmadan gönderilen isteği koruyamaz
SunucuVeriyi kaydetmeden veya işlem yapmadan önce son doğrulamaKullanıcıya anlık geri bildirim için tek başına yeterli değildir
Örneğin e-posta alanına type="email" vermek temel biçim kontrolünü sağlar; fakat belirli bir alan adını zorunlu kılmak, e-postanın daha önce kullanılıp kullanılmadığını kontrol etmek veya kullanıcının yetkisini doğrulamak JavaScript’in değil, sunucunun ve uygulama iş kurallarının görevidir.

Yaygın doğrulama kuralları​


Boş alanları value.trim() === '' ile kontrol edin. Metin uzunluğu için value.length, sayısal alanlarda ise değeri Number() ile dönüştürdükten sonra Number.isFinite() ve aralık kontrollerini kullanın. Sayı alanında yalnızca tarayıcının type="number" kontrolüne güvenmeyin; sunucuda da sayının beklenen aralıkta olduğunu doğrulayın.

Düzenli ifadeler, e-posta veya telefon gibi belirli biçimleri kontrol etmekte kullanılabilir; ancak karmaşık bir düzenli ifadeyle her geçerli adresi eksiksiz yakalayacağınızı varsaymayın. Kullanıcıdan gereksiz biçim kısıtları istemek yerine alanın gerçek ihtiyacını tanımlayın. Parola gibi hassas değerleri hata mesajında, URL’de veya günlük kayıtlarında göstermeyin.

Alanları yalnız gönderme anında değil, kullanıcı alanı terk ettiğinde veya yazarken de kontrol edebilirsiniz. Yazarken yapılan kontrolde kullanıcı her karakterde hata mesajı görerek rahatsız olmamalıdır; genellikle gönderme anında kesin doğrulama, alan terk edildiğinde ise kısa geri bildirim daha dengeli bir yaklaşımdır.

Doğrulama başarılı olduğunda ne yapılmalı?​


İstemci tarafındaki tüm kontroller geçerse bu yalnızca tarayıcıdaki verilerin belirlediğiniz biçime uyduğunu gösterir; hesabın oluşturulduğunu, e-postanın kullanılabilir olduğunu veya isteğin sunucu tarafından kabul edildiğini kanıtlamaz. Veriyi API’ye gönderdiğinizde sunucunun başarı ve hata yanıtlarını ayrıca ele alın.

Sunucu bir alanı reddederse dönen hatayı ilgili alanın yanında gösterin. Örneğin kullanıcı adı zaten kullanılıyorsa bunu biçim hatası gibi değil, sunucunun verdiği iş kuralı hatası olarak açıklayın. Sunucu tarafında doğrulama yapılmadan veriyi veritabanına kaydetmeyin; istemci kodu değiştirilmiş, devre dışı bırakılmış veya hiç çalıştırılmamış olabilir.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)