HTML Academy · Ders

novalidate Özniteliği

Doğrulamayı kendiniz yönetirken tarayıcı doğrulamasını devre dışı bırakın

novalidate Özniteliği, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Tarayıcı Doğrulamasının Sınırlamaları

HTML5 yerleşik doğrulamasının bazı sınırlamaları vardır:

Hata iletileri tarayıcıya bağlıdır ve biçimlendirilmesi zordur
Doğrulama yalnızca gönderme sırasında çalışır; odak kaybında veya girdi sırasında çalışmaz
Karmaşık iş kuralları (parola eşleşmesi, benzersiz kullanıcı adı) uygulanamaz

Tam denetim gerektiğinde yerleşik doğrulamayı novalidate ile devre dışı bırakın.

Form Üzerinde novalidate

Bir forma novalidate eklemek, tüm tarayıcı doğrulamasını devre dışı bırakır:

<form action="/register" method="post" novalidate>
  <!-- Browser will NOT validate these on submit -->
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="8" required>
  <button type="submit">Register</button>
</form>

novalidate Neden Kullanılır?

Tarayıcı doğrulamasını devre dışı bırakmanın yaygın nedenleri:

Tasarım sisteminizle uyumlu özel hata iletisi biçimlendirmesi
Gerçek zamanlı doğrulama (yalnızca gönderme sırasında değil, odak kaybında veya girdi sırasında)
Birden çok alanı kapsayan doğrulama (örneğin parola onayı)
Yönlendirme sonrasında sunucu tarafı hatalarının gösterilmesi
Üçüncü taraf doğrulama kitaplıkları (Zod, Yup, React Hook Form)

Özel Doğrulama Deseni

novalidate ile özel doğrulama oluşturun:

<form id="form" novalidate>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <span class="error" id="email-error" role="alert" hidden></span>

  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email');
  const error = document.getElementById('email-error');

  if (!email.value || !email.value.includes('@')) {
    error.textContent = 'Please enter a valid email address.';
    error.hidden = false;
    email.focus();
  } else {
    error.hidden = true;
    // Submit...
  }
});
</script>

Düğme Üzerinde formnovalidate

Tüm formda novalidate kullanmadan, belirli bir gönderme düğmesi için doğrulamayı devre dışı bırakın:

<form action="/save" method="post">
  <input type="email" name="email" required>

  <!-- Save as draft: skip validation -->
  <button type="submit" formaction="/save-draft" formnovalidate>
    Save Draft
  </button>

  <!-- Final submit: normal validation -->
  <button type="submit">Submit</button>
</form>

Özel Hataları Biçimlendirme

Özel doğrulama hatalarının biçimlendirilmesi:

.field-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

input.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

input.valid {
  border-color: #22c55e;
}

Erişilebilir Özel Hatalar

Özel hata iletilerini erişilebilir hâle getirin:

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  aria-describedby="email-error"
  aria-invalid="false"
>
<span id="email-error" role="alert"></span>
<!-- aria-invalid="true" when invalid -->
<!-- role="alert" announces changes to screen readers -->
<!-- aria-describedby links the input to its error message -->

Doğrulama Zamanlaması Stratejileri

novalidate ile ne zaman doğrulama yapılmalı:

Gönderme sırasında — en basit yaklaşım; her şeyi aynı anda doğrulayın
Odak kaybında — kullanıcı alandan ayrıldığında her alanı doğrulayın
Girdi sırasında — gerçek zamanlıdır; en iyi kullanıcı deneyimini sağlar ancak müdahaleci hissettirebilir
Karma — odak kaybında doğrulayın, girdi sırasında hataları temizleyin

Odak Kaybı + Girdi Karma Deseni

Kullanıcılar için en uygun doğrulama yaklaşımı:

function validateEmail(input, errorEl) {
  const val = input.value.trim();
  if (!val) {
    showError(input, errorEl, 'Email is required.');
  } else if (!/^[^@]+@[^@]+\.[^@]+$/.test(val)) {
    showError(input, errorEl, 'Enter a valid email address.');
  } else {
    clearError(input, errorEl);
  }
}

input.addEventListener('blur', () => validateEmail(input, errorEl));
input.addEventListener('input', () => {
  // Only clear the error while typing, don't re-validate until blur
  if (input.classList.contains('invalid')) validateEmail(input, errorEl);
});

novalidate ve Sunucu Doğrulaması

Sunucu tarafında da her zaman doğrulama yapın:

İstemci tarafı doğrulama kullanıcı deneyimi içindir
Sunucu tarafı doğrulama güvenlik içindir
Kullanıcılar istekleri değiştirerek HTML doğrulamasını atlayabilir
novalidate ve özel JS doğrulaması, sunucu kurallarını yansıtmalıdır

Doğrulama Kitaplıkları

novalidate ile birlikte kullanılabilen popüler JavaScript doğrulama kitaplıkları:

Zod — TypeScript öncelikli şema doğrulaması
Yup — nesne şeması doğrulaması
Valibot — hafif şema kitaplığı
React Hook Form — React için form durumu ve doğrulama

Özel Doğrulamayı Test Etme

Özel form doğrulaması nasıl test edilir:

Boş gönderimi test edin (zorunlu alanlar)
Geçersiz biçimi test edin (yanlış e-posta, hatalı telefon deseni)
Sınır durumlarını test edin (yalnızca boşluklar, Unicode, çok uzun dizeler)
Hata duyurularını doğrulamak için ekran okuyucuyla test edin
Hatalar gösterildikten sonra alanlar arasında klavye gezinmesini test edin

Hızlı Kontrol

Bir düğmedeki formnovalidate ne yapar?

Tekrar: novalidate

novalidate için temel bilgiler:

Form üzerindeki novalidate — tüm tarayıcı doğrulamasını devre dışı bırakır
Düğme üzerindeki formnovalidate — yalnızca o gönderme işlemi için doğrulamayı devre dışı bırakır
Kullanıcı deneyimini denetlemek ve karmaşık kuralları uygulamak için özel doğrulama kullanın
Sunucu tarafında her zaman doğrulama yapın — istemci doğrulaması atlanabilir
Hataları role="alert" ve aria-invalid ile erişilebilir biçimde duyurun

Sıkça Sorulan Sorular

“novalidate Özniteliği” dersi ücretsiz mi?

Evet — “novalidate Özniteliği” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“novalidate Özniteliği” dersinde ne öğreneceğim?

Doğrulamayı kendiniz yönetirken tarayıcı doğrulamasını devre dışı bırakın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“novalidate Özniteliği” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön