HTML, öznitelikler aracılığıyla yerleşik doğrulama sağlar, bu nedenle tarayıcı geçersiz gönderimleri engeller ve mesajları gösterir — JavaScript gerekli değildir.
html
Submit
HTML, öznitelikler aracılığıyla yerleşik doğrulama sağlar, bu nedenle tarayıcı geçersiz gönderimleri engeller ve mesajları gösterir — JavaScript gerekli değildir.
Submit
Doğrulama öznitelikleri: required, min/max, minlength/maxlength, pattern (regex) ve türün kendisi (email, url, number). Gönderim sırasında tarayıcı bunları kontrol eder, herhangi biri başarısız olursa gönderimi durdurur ve ilk geçersiz alanda yerel bir baloncuk gösterir.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
JavaScript'te doğrulamayı okuyabilir ve özelleştirebilirsiniz:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidity özniteliklerin ifade edemediği kurallar eklemenizi sağlar (örn. "parola onayı eşleşir").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Her zaman sunucuda da doğrulayın — istemci doğrulaması UX içindir; kullanıcılar bunu atlayabilir.
Yerel doğrulama, erişilebilir, yerelleştirilmiş hata mesajları ve anında geri bildirim sağlar.
Bildirimsel öznitelikleri özel kurallar için Constraint Validation API ile birleştirin — ancak bunu tek savunma hattınız olarak ummayin; sunucu da doğrulamalıdır.