HTML Academy · Lekcja

Atrybut novalidate

Wyłączanie walidacji przeglądarki podczas samodzielnego jej obsługiwania

Atrybut novalidate to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Ograniczenia walidacji w przeglądarce

Wbudowana walidacja HTML5 ma ograniczenia:

Komunikaty o błędach zależą od przeglądarki i trudno je stylizować
Walidacja uruchamia się tylko podczas wysyłania formularza, a nie przy utracie fokusu ani podczas wprowadzania danych
Złożone reguły biznesowe (zgodność haseł, unikalna nazwa użytkownika) są niemożliwe do zrealizowania

Gdy potrzebna jest pełna kontrola, należy wyłączyć wbudowaną walidację za pomocą novalidate.

novalidate w formularzu

Dodanie novalidate do formularza wyłącza całą walidację przeglądarki:

<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>

Dlaczego używać novalidate?

Typowe powody wyłączenia walidacji przeglądarki:

Własne stylowanie komunikatów o błędach zgodne z systemem projektowym
Walidacja w czasie rzeczywistym (przy utracie fokusu lub wprowadzaniu danych, nie tylko podczas wysyłania formularza)
Walidacja wielu pól (np. potwierdzenie hasła)
Wyświetlanie błędów po stronie serwera po przekierowaniu
Biblioteki walidacji innych firm (Zod, Yup, React Hook Form)

Wzorzec niestandardowej walidacji

Niestandardową walidację można zbudować za pomocą novalidate:

<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>

formnovalidate na przycisku

Wyłączenie walidacji dla konkretnego przycisku wysyłania bez dodawania novalidate do całego formularza:

<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>

Stylowanie niestandardowych błędów

Stylowanie niestandardowych komunikatów o błędach:

.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;
}

Dostępne niestandardowe błędy

Należy zapewnić dostępność niestandardowych komunikatów o błędach:

<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 -->

Strategie określania momentu walidacji

Kiedy przeprowadzać walidację z novalidate:

Podczas wysyłania — najprościej; wszystko jest sprawdzane jednocześnie
Przy utracie fokusu — każde pole jest sprawdzane, gdy użytkownik je opuszcza
Podczas wprowadzania danych — w czasie rzeczywistym; najlepsze UX, ale może wydawać się zbyt agresywne
Hybrydowa — sprawdzanie przy utracie fokusu, usuwanie błędów podczas wprowadzania danych

Hybrydowy wzorzec Blur + Input

Najbardziej przyjazne dla użytkownika podejście do walidacji:

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 a walidacja po stronie serwera

Należy zawsze przeprowadzać walidację również po stronie serwera:

Walidacja po stronie klienta służy wygodzie użytkownika
Walidacja po stronie serwera służy bezpieczeństwu
Użytkownicy mogą ominąć walidację HTML, modyfikując żądania
Walidacja novalidate + niestandardowa walidacja JS powinny odzwierciedlać reguły serwera

Biblioteki walidacji

Popularne biblioteki JavaScript do walidacji, używane z novalidate:

Zod — walidacja schematów zorientowana przede wszystkim na TypeScript
Yup — walidacja schematów obiektów
Valibot — lekka biblioteka schematów
React Hook Form — stan formularza i walidacja w React

Testowanie niestandardowej walidacji

Jak testować niestandardową walidację formularza:

Przetestować wysłanie pustego formularza (pola wymagane)
Przetestować nieprawidłowy format (błędny adres e-mail, wzorzec numeru telefonu)
Przetestować przypadki brzegowe (same spacje, znaki Unicode, bardzo długie ciągi znaków)
Przetestować formularz z czytnikiem ekranu, aby sprawdzić ogłaszanie błędów
Przetestować nawigację klawiaturą między polami po wyświetleniu błędów

Szybkie sprawdzenie

Co robi atrybut formnovalidate na przycisku?

Podsumowanie: novalidate

Najważniejsze informacje o novalidate:

novalidate w formularzu — wyłącza całą walidację przeglądarki
formnovalidate na przycisku — wyłącza walidację tylko dla tego wysłania formularza
Należy używać niestandardowej walidacji, aby kontrolować UX i obsługiwać złożone reguły
Należy zawsze przeprowadzać walidację po stronie serwera — walidację po stronie klienta można ominąć
Błędy należy ogłaszać w dostępny sposób za pomocą role="alert" i aria-invalid

Często zadawane pytania

Czy lekcja „Atrybut novalidate” jest bezpłatna?

Tak — pełny tekst „Atrybut novalidate” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Atrybut novalidate”?

Wyłączanie walidacji przeglądarki podczas samodzielnego jej obsługiwania Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Atrybut novalidate”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

required pattern min max i maxlength
Atrybut novalidate
Podstawy Constraint Validation API
Walidacja HTML5 a JavaScript — kompromisy

← Powrót do HTML Academy