Kodkitabi

Constraint Validation API

required, minlength, pattern, novalidate ve custom mesajlar.

HTML5 form öğeleri doğal doğrulama sunar.

  • required: Boş bırakılmamalı.
  • minlength / maxlength: Uzunluk sınırları.
  • pattern: RegEx ile format kontrolü.
  • novalidate: Tarayıcı doğrulamasını devre dışı bırakır.

JavaScript ile setCustomValidity() ile özel mesajlar eklenebilir.

HTML5 Form Örneği 
<form id="signup" novalidate>
  <label for="email">E-posta:</label>
  <input type="email" id="email" name="email" required />
  <br/>
  <label for="password">Şifre:</label>
  <input type="password" id="password" name="password" minlength="8" required pattern="(?=.*[A-Z])(?=.*\d).+" />
  <br/>
  <button type="submit">Gönder</button>
</form>
Custom Validation JS 
const form = document.getElementById('signup');
form.addEventListener('submit', function(e) {
  const password = document.getElementById('password');
  if (!/(?=.*[A-Z])(?=.*\d)/.test(password.value)) {
    password.setCustomValidity('Şifre en az bir büyük harf ve bir rakam içermelidir.');
  } else {
    password.setCustomValidity('');
  }
});