Walidacja Formularzy

INF.03.5 (2) — Tworzenie i administrowanie bazami danych, Witryny i aplikacje internetowe

Wprowadzenie Dwa Poziomy Walidacji

Walidacja formularza to krytyczny proces zapewniający, że dane wprowadzone przez użytkownika są kompletne i poprawne.

  • Walidacja Klienta (Front-end): Odbywa się w przeglądarce. Jest szybka i poprawia UX, ale **nie jest bezpieczna** (można ją ominąć).
  • Walidacja Serwera (Back-end): Odbywa się na serwerze. **Jest obowiązkowa i kluczowa dla bezpieczeństwa** oraz integralności danych.

HTML5 Walidacja po Stronie Klienta (Podstawowa)

Użycie wbudowanych atrybutów, które są pierwszym i najprostszym filtrem danych.

Atrybut Funkcja Przykład
required Wymusza wypełnienie pola. <input type="text" required>
type="email" Wymaga formatu adresu e-mail. <input type="email">
pattern Wymaga dopasowania do wyrażenia regularnego (RegEx). <input pattern="[A-Z]{3}">
min / max Ograniczenie wartości (dla typów number lub date). <input type="number" min="18">
<!-- Przykład użycia RegEx: 3 duże litery -->
<input type="text" pattern="[A-Z]{3}" title="Wymagane 3 duże litery" required>

JavaScript Walidacja Klienta (Zaawansowana)

JS jest potrzebny do skomplikowanej logiki (np. porównywanie dwóch haseł, dynamiczne obliczenia) oraz do tworzenia niestandardowych, przyjaznych użytkownikowi komunikatów błędów.

Klucz do kontroli:

document.getElementById('formularz').addEventListener('submit', function(e) {
    let haslo1 = document.getElementById('h1').value;
    let haslo2 = document.getElementById('h2').value;

    if (haslo1 !== haslo2) {
        // Blokowanie wysyłki formularza
        e.preventDefault();
        alert('Hasła nie są identyczne!');
    }
});

Serwer Walidacja Back-end (Bezpieczeństwo)

Jest to absolutnie niezbędne, ponieważ dane wysłane przez klienta **zawsze** należy traktować jako niebezpieczne.

  • **Walidacja:** Powtórne sprawdzenie wszystkich reguł logicznych (długość hasła, poprawność formatu).
  • **Sanityzacja (czyszczenie):** Usuwanie lub modyfikowanie potencjalnie szkodliwych znaków (np. tagów HTML/JS) z danych, aby zapobiec atakom **XSS (Cross-Site Scripting)**.

⚠️ Pamiętaj: Walidacja JS to tylko udogodnienie dla UX. Bezpieczeństwo zapewnia wyłącznie Walidacja Serwera!

Ćwiczenie Zadania Praktyczne

Zadanie 1: Wdrożenie HTML5 (Podstawowe)

Utwórz formularz rejestracji (login, e-mail, hasło, wiek, kod pocztowy). Zastosuj walidację:

Zadanie 2: Sprawdzanie Hasła w JS (Ponadpodstawowe)

Napisz kod JS, który sprawdza, czy hasło (pobrane z pola formularza):

Zadanie 3: Dyskusja o Sanityzacji

Wyjaśnij, dlaczego serwer musi usunąć kod <script>alert('XSS')</script> przesłany w polu "Komentarz". Jaka funkcja w języku PHP/Python/Node.js służy do usuwania tagów HTML?

Materiały Narzędzia i Linki

  • Wyrażenia Regularne: RegExr - interaktywny tester i edytor RegEx.
  • Dokumentacja MDN: Client-side form validation (po angielsku).
  • Bezpieczeństwo: Wyszukaj "OWASP Top 10" - poznaj zagrożenia, które walidacja serwera ma eliminować.
Materiały: Walidacja Formularzy · Opracowanie na podstawie wymagań INF.03