0Pricing
HTML Academy · Lekcja

Podstawy Constraint Validation API

Odczytywanie stanu poprawności i niestandardowych komunikatów za pomocą Constraint Validation API

Podstawy Constraint Validation API to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 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.

Czym jest Constraint Validation API?

Constraint Validation API to interfejs JavaScriptu służący do odczytywania i ustawiania stanu walidacji formularza:

  • Sprawdzanie, czy pole jest prawidłowe
  • Odczytywanie informacji o tym, które konkretne ograniczenie nie zostało spełnione
  • Ustawianie niestandardowych komunikatów o błędach
  • Programowe uruchamianie interfejsu walidacji przeglądarki

Właściwość validity

Każda kontrolka formularza ma obiekt validity z określonymi flagami logicznymi:

const input = document.getElementById('email');
const v = input.validity;

console.log(v.valid);         // true if all constraints pass
console.log(v.valueMissing);  // true if required but empty
console.log(v.typeMismatch);  // true if type doesn't match (e.g. bad email)
console.log(v.patternMismatch); // true if pattern fails
console.log(v.tooShort);      // true if shorter than minlength
console.log(v.tooLong);       // true if longer than maxlength
console.log(v.rangeUnderflow); // true if less than min
console.log(v.rangeOverflow);  // true if more than max

Metoda checkValidity

checkValidity() zwraca wartość true/false i wywołuje zdarzenie invalid:

const form = document.getElementById('my-form');

// Check entire form:
if (!form.checkValidity()) {
  console.log('Form has errors');
}

// Check individual field:
const email = document.getElementById('email');
if (!email.checkValidity()) {
  console.log('Email is invalid');
}
// The 'invalid' event fires on invalid fields

Metoda reportValidity

reportValidity() wyświetla natywny interfejs walidacji przeglądarki:

const input = document.getElementById('username');

// Shows native browser error tooltip if invalid:
const valid = input.reportValidity();
console.log(valid);  // true or false

// On a form: validates all fields and shows first error:
document.getElementById('form').reportValidity();

Właściwość validationMessage

validationMessage zwraca tekst komunikatu o błędzie przeglądarki:

const email = document.querySelector('input[type=email]');
email.value = 'not-an-email';

console.log(email.validationMessage);
// e.g. "Please include an '@' in the email address..."

console.log(email.validity.typeMismatch); // true

setCustomValidity

setCustomValidity(message) ustawia niestandardowy błąd walidacji:

const username = document.getElementById('username');

// Check availability on blur:
username.addEventListener('blur', async () => {
  const res = await fetch(`/check-username?name=${username.value}`);
  const { taken } = await res.json();

  if (taken) {
    username.setCustomValidity('This username is already taken.');
  } else {
    username.setCustomValidity('');  // empty string = clear the error
  }
});

Czyszczenie niestandardowego stanu walidacji

Po naprawieniu problemu przez użytkownika należy wyczyścić niestandardowy stan walidacji:

const input = document.getElementById('username');

input.addEventListener('input', () => {
  // Clear custom error when user starts typing again:
  input.setCustomValidity('');
});

input.addEventListener('blur', async () => {
  // Re-validate on blur:
  const taken = await checkUsername(input.value);
  input.setCustomValidity(taken ? 'Username taken' : '');
});

Zdarzenie invalid

Zdarzenie invalid jest wywoływane dla kontrolek formularza, które nie przechodzą walidacji:

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('invalid', (e) => {
    e.preventDefault();  // prevent default browser tooltip
    // Show your custom error UI instead:
    showError(input, input.validationMessage);
  });
});

Właściwość willValidate

willValidate ma wartość true, jeśli element uczestniczy w walidacji ograniczeń:

document.querySelectorAll(':input').forEach(el => {
  if (el.willValidate) {
    console.log(el.name, 'will be validated');
  }
});
// Disabled, hidden, or output elements return willValidate = false

Używanie validity w niestandardowej walidacji

Kompletny przykład niestandardowej walidacji:

<form id="signup" novalidate>
  <input type="email" id="email" name="email" required>
  <span id="email-err" role="alert"></span>
  <button type="submit">Sign Up</button>
</form>

<script>
const form = document.getElementById('signup');
const email = document.getElementById('email');
const err = document.getElementById('email-err');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  err.textContent = '';

  if (email.validity.valueMissing) {
    err.textContent = 'Email is required.';
    email.focus();
    return;
  }
  if (email.validity.typeMismatch) {
    err.textContent = 'Enter a valid email address.';
    email.focus();
    return;
  }
  // Submit...
});
</script>

Podsumowanie flag ValidityState

Wszystkie flagi ValidityState:

  • valueMissing — pole wymagane, ale puste
  • typeMismatch — nieprawidłowy format typu
  • patternMismatch — wartość nie pasuje do wzorca wyrażenia regularnego
  • tooShort / tooLong — minlength/maxlength
  • rangeUnderflow / rangeOverflow — min/max
  • stepMismatch — wartość nie jest prawidłowym krokiem
  • customError — ustawiono komunikat setCustomValidity
  • badInput — przeglądarka nie może przeanalizować wartości

Szybkie sprawdzenie

Jak programowo wyświetlić natywne okno wyskakujące z błędem walidacji przeglądarki?

Podsumowanie: Constraint Validation API

Najważniejsze informacje o Constraint Validation API:

  • input.validity — obiekt ValidityState z określonymi flagami
  • checkValidity() — zwraca wartość true/false i wywołuje zdarzenie invalid
  • reportValidity() — sprawdza poprawność i wyświetla natywny interfejs błędu
  • validationMessage — tekst komunikatu o błędzie przeglądarki
  • setCustomValidity(msg) — ustawia niestandardowy błąd; pusty ciąg go usuwa

Często zadawane pytania

Czy lekcja „Podstawy Constraint Validation API” jest bezpłatna?

Tak — pełny tekst „Podstawy Constraint Validation API” 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 „Podstawy Constraint Validation API”?

Odczytywanie stanu poprawności i niestandardowych komunikatów za pomocą Constraint Validation API Ć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 3 z 4.

Ile czasu zajmuje lekcja „Podstawy Constraint Validation API”?

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

  1. required pattern min max i maxlength
  2. Atrybut novalidate
  3. Podstawy Constraint Validation API
  4. Walidacja HTML5 a JavaScript — kompromisy
← Powrót do HTML Academy