HTML Formlarında Constraint Validation API ile Hata Yönetimi

HTML form doğrulaması yalnızca required eklemekten ibaret değildir. Constraint Validation API; alanın neden geçersiz olduğunu öğrenmeyi, özel hata mesajı göstermeyi ve formu JavaScript ile güvenli biçimde denetlemeyi sağlar. Sunucu tarafı doğrulamanın yerini almaz, ancak kullanıcı hatalarını daha erken yakalar.

Önce yerleşik kısıtları tanımlayın

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

  <label for="password">Parola</label>
  <input id="password" name="password" type="password"
         minlength="12" required>

  <button>Kaydol</button>
</form>

Tarayıcı valueMissing, typeMismatch ve tooShort gibi geçerlilik durumlarını kendisi üretir.

checkValidity ve reportValidity farkı

const form = document.querySelector('#signup');

console.log(form.checkValidity());
form.reportValidity();

checkValidity() geçerlilik sonucunu döndürür ve geçersiz alanlarda invalid olayı oluşturur. reportValidity() buna ek olarak tarayıcının kullanıcı arayüzünü göstermesini ister.

Özel iş kuralını setCustomValidity ile ekleyin

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

password.addEventListener('input', () => {
  const hasNumber = /\d/.test(password.value);
  password.setCustomValidity(
    hasNumber ? '' : 'Parola en az bir rakam içermeli.'
  );
});

Geçerli duruma dönüldüğünde mesaj mutlaka boş metne çevrilmelidir; aksi halde alan geçersiz kalır.

Hata özetini erişilebilir tutun

<div id="form-errors" role="alert" aria-live="polite"></div>

Renk tek başına hata göstergesi olmamalıdır. Metin mesajı, alan etiketi ve gerektiğinde aria-describedby bağlantısı kullanın. Geçersiz gönderimde odağı ilk problemli alana taşıyabilirsiniz:

form.addEventListener('submit', (event) => {
  if (!form.checkValidity()) {
    event.preventDefault();
    form.querySelector(':invalid')?.focus();
  }
});

İstemci doğrulaması kolaylık sağlar; istek JavaScript dışından gönderilebilir. Aynı kuralları sunucuda tekrar uygulayın ve kullanıcı girdisini doğrulanmış kabul etmeyin.

Başvuru: WHATWG HTML constraint validation standardı.