Kurs HTML

Zapewnienie poprawności danych

Walidacja formularzy to proces sprawdzania, czy dane wprowadzone przez użytkownika są poprawne i kompletne przed ich wysłaniem na serwer. HTML5 wprowadził wbudowane mechanizmy walidacji po stronie klienta (w przeglądarce), które mogą znacznie zredukować potrzebę pisania własnego kodu JavaScript do podstawowych sprawdzeń.

Wbudowana walidacja opiera się na atrybutach dodanych do elementów formularza oraz na specjalnych typach pól <input>.

Mechanizmy walidacji HTML5

Przeglądarka automatycznie sprawdza poprawność danych w momencie, gdy użytkownik próbuje wysłać formularz (chyba że walidacja jest wyłączona atrybutem novalidate w <form>). Główne mechanizmy to:

• Atrybut required: Sprawdza, czy pole zostało wypełnione (lub czy dokonano wyboru w select, radio, checkbox, file).
• Typy pól <input>:
  • type="email": Sprawdza podstawowy format adresu e-mail.
  • type="url": Sprawdza podstawowy format adresu URL.
  • type="number": Sprawdza, czy wprowadzono liczbę.
  • type="date", time, month, etc.: Sprawdzają, czy wprowadzono poprawną datę/czas.
• Atrybuty min i max: Sprawdzają, czy wartość liczbowa (type="number", range) lub data/czas (type="date", etc.) mieści się w zadanym zakresie.
• Atrybut step: Sprawdza, czy wartość liczbowa lub data/czas jest zgodna z określonym krokiem (np. czy liczba jest wielokrotnością 10).
• Atrybut maxlength: Ogranicza maksymalną liczbę znaków (choć technicznie nie jest to walidacja formatu, a ograniczenie wprowadzania).
• Atrybut pattern: Sprawdza, czy wartość pola pasuje do zdefiniowanego wyrażenia regularnego.

Komunikaty o błędach

Jeśli walidacja nie powiedzie się (np. użytkownik zostawi puste pole required lub wpisze niepoprawny e-mail w type="email"), przeglądarka zazwyczaj:

1. Blokuje wysłanie formularza.
2. Wyświetla komunikat o błędzie obok pierwszego niepoprawnego pola.
3. Ustawia fokus na tym polu.

Wygląd i treść tych komunikatów zależą od przeglądarki i jej ustawień językowych. Można je częściowo dostosować za pomocą JavaScriptu (Constraint Validation API), ale podstawowe działanie jest automatyczne.

Przykład formularza z walidacją:

<form action="/register" method="post">
  <div>
    <label for="val-username">Nazwa użytkownika (min. 3 znaki):</label>
    <input type="text" id="val-username" name="username" required minlength="3"> 
    <!-- minlength to też atrybut walidacyjny -->
  </div>
  <div>
    <label for="val-email">E-mail:</label>
    <input type="email" id="val-email" name="email" required>
  </div>
  <div>
    <label for="val-age">Wiek (18-99):</label>
    <input type="number" id="val-age" name="age" min="18" max="99" required>
  </div>
   <div>
    <label for="val-zip">Kod pocztowy (XX-XXX):</label>
    <input type="text" id="val-zip" name="zip" pattern="[0-9]{2}-[0-9]{3}" title="Format XX-XXX" required>
  </div>
  <div>
    <input type="checkbox" id="val-terms" name="terms" required>
    <label for="val-terms">Akceptuję regulamin</label>
  </div>
  
  <button type="submit">Zarejestruj</button>
</form>Kopiuj

Spróbuj wysłać poniższy formularz bez wypełniania pól lub wpisując niepoprawne dane, aby zobaczyć działanie walidacji w Twojej przeglądarce:

Stylizacja stanów walidacji za pomocą CSS

CSS dostarcza specjalnych pseudoklas, które pozwalają na stylizowanie pól formularza w zależności od ich stanu walidacji. Jest to świetny sposób na wizualne informowanie użytkownika o poprawności wprowadzanych danych na bieżąco.

• :valid: Styluje element (np. input), którego wartość jest obecnie poprawna zgodnie z zadanymi regułami walidacji (typ, pattern, required itp.).
• :invalid: Styluje element, którego wartość jest obecnie niepoprawna.
• :required: Styluje element, który ma atrybut required.
• :optional: Styluje element, który nie ma atrybutu required (jest opcjonalny).
• :in-range: Styluje element liczbowy lub daty, którego wartość mieści się w zakresie określonym przez min i max.
• :out-of-range: Styluje element liczbowy lub daty, którego wartość wykracza poza zakres min/max.
• :user-invalid (nowsza, eksperymentalna): Styluje element, który jest niepoprawny i użytkownik wszedł z nim w interakcję (np. próbował wysłać formularz lub opuścił pole). Pozwala uniknąć oznaczania pól jako błędne, zanim użytkownik skończy pisać.

Przykład stylizacji CSS:

input:required {
  border-left: 5px solid orange; /* Oznacz wymagane pola */
}

input:optional {
  /* Można dodać delikatniejszy styl dla pól opcjonalnych */
}

/* Stylizuj tylko po interakcji użytkownika, aby uniknąć oznaczania pustych pól jako błędne od razu */
input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: red;
  background-color: #ffe_bb;
}

input:valid:not(:placeholder-shown) {
  border-color: green;
}

/* Bardziej nowoczesne podejście z :user-invalid (sprawdź wsparcie przeglądarek) */
/* 
input:user-invalid {
  border-color: red;
}
*/

/* Stylizacja komunikatu o błędzie (przykład, wymaga JS do wyświetlenia) */
.error-message {
  color: red;
  font-size: 0.9em;
  display: none; /* Domyślnie ukryty */
}

input:invalid + .error-message {
  /* Można próbować pokazać, ale lepiej kontrolować to przez JS */
}Kopiuj

Zastosowanie tych pseudoklas pozwala na tworzenie bardziej interaktywnych i przyjaznych dla użytkownika formularzy, które na bieżąco informują o poprawności danych.

Ograniczenia walidacji HTML5

• Walidacja po stronie klienta nie wystarczy! Użytkownik może łatwo ominąć walidację HTML5 (np. wyłączając JavaScript, modyfikując kod strony, wysyłając żądanie bezpośrednio). Zawsze należy przeprowadzać pełną i rygorystyczną walidację danych po stronie serwera!
• Komunikaty o błędach są zależne od przeglądarki i trudne do pełnej customizacji bez JavaScriptu.
• Niektóre złożone reguły walidacyjne (np. sprawdzanie unikalności nazwy użytkownika w bazie danych, porównywanie wartości dwóch pól) nie są możliwe do zrealizowania za pomocą samej walidacji HTML5.

Mimo tych ograniczeń, walidacja HTML5 jest cennym narzędziem do poprawy użyteczności formularzy i szybkiego informowania użytkownika o podstawowych błędach.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Dodaj style CSS do formularza rejestracyjnego z przykładu powyżej, aby:

1. Pola wymagane miały pomarańczową ramkę po lewej stronie.
2. Pola, które są niepoprawne (:invalid) i nie są puste (:not(:placeholder-shown)) ani aktywne (:not(:focus)), miały czerwoną ramkę.
3. Pola, które są poprawne (:valid) i nie są puste, miały zieloną ramkę.

Rozwiązanie (fragment CSS):

/* Dodaj te style do sekcji <style> lub pliku CSS */
input:required, select:required, textarea:required {
  border-left: 5px solid orange;
}

input:invalid:not(:placeholder-shown):not(:focus),
select:invalid:not(:focus),
textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-color: red;
  box-shadow: 0 0 3px red; /* Dodatkowy efekt wizualny */
}

input:valid:not(:placeholder-shown),
select:valid,
textarea:valid:not(:placeholder-shown) {
  border-color: green;
}

/* Poprawka dla checkboxa required - stylizujmy etykietę */
input[type="checkbox"]:required:invalid + label {
    color: red; /* Zmień kolor etykiety, jeśli checkbox jest wymagany i niezaznaczony */
}
input[type="checkbox"]:required:valid + label {
    color: initial; /* Przywróć domyślny kolor, gdy jest zaznaczony */
}
Kopiuj

Uwaga: Dokładne selektory i warunki (np. :not(:placeholder-shown)) mogą wymagać dostosowania w zależności od konkretnego przypadku i pożądanego zachowania.