Walidacja danych po stronie klienta

O czym jest to opracowanie?

Walidacja po stronie klienta

Walidacja kliencka to sprawdzanie danych formularza bezposrednio w przegladarce użytkownika, zanim zostan wysłane na serwer. Poprawia doswiadczenie użytkownika (UX) dzieki natychmiastowej informacji zwrotnej, ale nie może zastapic walidacji serwerowej że wzgledow bezpieczeństwa.

Dlaczego warto to znac?

Lepszy UX - użytkownik od razu wie o błędach bez czekania na odpowiedz serwera
Mniejsze obciazenie serwera - błędne formularze nie sa wysyłane
Swiadomosc ograniczeń - rozumiesz, dlaczego to nie wystarczy do bezpieczeństwa

Cel Twojego opracowania

Rozumiec role walidacji klienckiej w UX i jej ograniczenia
Umiec wyjaśnić różnicę miedzy walidacja HTML5 a JavaScript
Potrafic pokazac przykłady walidacji z atrybutami HTML5 i kodem JS
Wiedzieć, jak walidacja kliencka współpracuje z serwerowa

Zakres obowiazkowy

Elementy merytoryczne

Czym jest walidacja kliencka
- Definicja i cel
- Wykonanie w przegladarce użytkownika
Walidacja HTML5
- Atrybuty: required, pattern, type, min, max, minlength, maxlength
- Automatyczne komunikaty błędów
- Stylowanie z :valid i :invalid
Walidacja w JavaScript
- Constraint Validation API
- Obsługa zdarzenia submit
- Własne komunikaty błędów
Ograniczenia walidacji klienckiej
- Możliwość wyłączenia JavaScript
- Manipulacja przez narzedzia deweloperskie
- Dlaczego nie zastepuje walidacji serwerowej
Porownanie z walidacja serwerowa
- Różnicę w celu i zastosowaniu
- Strategia “obie walidacje”

Wymagane przykłady kodu

Przykład 1

Formularz HTML5 - pokaz atrybuty required, type=“email”, pattern

Przykład 2

Atrybut pattern - użyj wyrażenia regularnego do walidacji formatu

Przykład 3

Walidacja JS - sprawdz długość pola lub zgodnosc haseł w JavaScript

Przykład 4

Zdarzenie submit - zapobiegaj wysłaniu formularza przy błędach

Zakres rozszerzony (dla wyzszych ocen)

Constraint Validation API (setCustomValidity, reportValidity)
Stylowanie stanow walidacji w CSS (:valid, :invalid, :focus)
Walidacja w czasie rzeczywistym (zdarzenie input)
Dostepnosc (ARIA) w komunikatach błędów
Demonstracja obejscia walidacji (wyłączenie JS, DevTools)

Proponowana struktura pracy

Struktura podstawowa

Wstep (0.5 strony) - UX a bezpieczeństwo
Walidacja HTML5 (1.5 strony) - atrybuty, przykłady, stylowanie
Walidacja JavaScript (1.5 strony) - zdarzenia, API, przykłady kodu
Ograniczenia i obejscia (1 strona) - dlaczego to nie wystarczy
Porownanie z PHP (0.5 strony) - kiedy używać której
Podsumowanie (0.5 strony)
Bibliografia

Pytania kontrolne

Czy można wyłączyć walidacje w przegladarce? Jak?
Dlaczego walidacja JS nie chroni serwera przed złośliwymi danymi?
Jakie sa zalety walidacji po stronie klienta?
Jak działa atrybut pattern w HTML5?
Czym jest Constraint Validation API?
Jak ustawic własny komunikat błędu w JavaScript?

Najczestsze błędy

Błąd	Jak poprawic?
Twierdzenie, że walidacja JS zapewnia bezpieczeństwo	Jasno wskazuj ograniczenia
Brak kodu JavaScript	Pokaz obsługę zdarzenia submit
Brak porownania z walidacja PHP	Wyjasni, dlaczego potrzebne sa obie
Pomijanie HTML5 validation	Omow atrybuty formularzy

Zasoby

MDN - Client-side form validation Kompletny przewodnik po walidacji formularzy

MDN - Constraint Validation API Dokumentacja API walidacji

HTML5 Input Types Typy input z wbudowana walidacja

CSS :invalid pseudo-class Stylowanie niepoprawnych pol

Do dziela!

To więcej niz praca zaliczeniowa

Opracowanie tego tematu to szansa, by naprawde zrozumiec jak poprawic UX formularzy i dlaczego walidacja kliencka to dopiero początek.

Wykorzystaj lekcje - konsultuj watpliwosci, pokazuj postepy! Pracuj iteracyjnie - outline -> draft -> kod -> redakcja