Walidacja danych

Walidacja danych to sprawdzanie poprawności i kompletności informacji, które podał użytkownik, zanim zostaną one przetworzone lub wysłane na serwer. Dzięki walidacji po stronie front-end możemy wychwycić typowe błędy (puste pola, źle sformatowany email itp.) i od razu poprosić użytkownika o poprawę, bez czekania na odpowiedź serwera.

Sprawdzanie pustych pól

Najprostszym wymogiem jest, by użytkownik wypełnił wymagane pola. Możemy sprawdzić, czy wartość po usunięciu białych znaków nie jest pusta. Np.:

if (poleImie.value.trim() === "") {
    komunikat = "Pole imię nie może być puste";
}

Tu używamy trim(), które usuwa spacje z początku i końca stringa – dzięki temu wykryjemy także przypadek, gdy ktoś wpisał same spacje.

Format email

Adres e-mail ma zawierać pewne znaki (np. @). Bardziej zaawansowane sprawdzanie wymaga wyrażeń regularnych (regex), ale na podstawowym poziomie możemy po prostu sprawdzić obecność znaku @ oraz kropki. Np.:

if (!email.value.includes("@")) {
    komunikat = "Adres e-mail musi zawierać @";
}

Można też sprawdzić email.value.indexOf(".") czy jest > -1. Pamiętajmy, że to uproszczona walidacja – np. "test@com" przejdzie ten test mimo braku prawidłowej domeny.

Długość hasła

Często wymagamy minimalnej długości hasła (np. 6 lub 8 znaków). Sprawdzamy to przez właściwość length stringa:

if (haslo.value.length < 8) {
    komunikat = "Hasło musi mieć przynajmniej 8 znaków";
}

Wyświetlanie komunikatów

Gdy wykryjemy błąd, powinniśmy poinformować o nim użytkownika. Można to zrobić poprzez:

• Wyświetlenie wiadomości w dedykowanym miejscu na stronie (np. w <span class="error"> obok pola lub w zbiorczym <div id="errorMsg">). Wystarczy ustawić textContent tego elementu na nasz komunikat.
• Alternatywnie, użycie alert(), choć to mniej przyjazne (okienka alert są natrętne). Lepszy jest komunikat na stronie, ewentualnie stylowany na czerwono.

Przykład: walidacja prostego formularza rejestracji

Poniżej przykład formularza HTML oraz skryptu JavaScript (upraszczający walidację email i długość hasła):

<form id="rejestracja">
  Email: <input type="email" id="email"><br>
  Hasło: <input type="password" id="haslo"><br>
  <div id="blad" style="color:red"></div>
  <button type="submit">Zarejestruj</button>
</form>

let form = document.getElementById("rejestracja");
let inpEmail = document.getElementById("email");
let inpHaslo = document.getElementById("haslo");
let divBlad = document.getElementById("blad");

form.addEventListener("submit", function(e) {
    e.preventDefault();
    let komunikat = "";
    if (inpEmail.value.trim() === "" || !inpEmail.value.includes("@")) {
        komunikat = "Podaj poprawny adres email.";
    } else if (inpHaslo.value.length < 6) {
        komunikat = "Hasło musi mieć co najmniej 6 znaków.";
    }
    if (komunikat !== "") {
        divBlad.textContent = komunikat; // wyświetl błąd
    } else {
        divBlad.textContent = "";
        alert("Dane poprawne! Można wysyłać formularz.");
        // Tu moglibyśmy np. wysłać dane na serwer
    }
});

W powyższym kodzie sprawdzamy dwa warunki: poprawność email (tutaj wymagamy jedynie obecności @ oraz tego, by pole nie było puste) oraz długość hasła. Jeśli któryś warunek nie jest spełniony, ustawiamy zmienną komunikat i wyświetlamy ją w czerwonym <div>. Jeśli komunikat pozostał pusty, uznajemy, że wszystko jest OK – w przykładzie wywołujemy alert potwierdzający (w realnej aplikacji w tym miejscu nastąpiłoby np. przesłanie danych do serwera lub przejście dalej).

Ćwiczenia

1. Przygotuj formularz logowania zawierający pola "login" (tekst) i "hasło" (password) oraz przycisk submit. Napisz skrypt, który zwaliduje te dane przy wysyłaniu formularza. Wymagania: oba pola muszą być wypełnione, a hasło musi mieć co najmniej 8 znaków. Wyświetl odpowiednie komunikaty błędów pod polami, jeśli warunki nie są spełnione.
2. Rozszerz walidację adresu email: oprócz sprawdzenia obecności @, upewnij się, że w adresie występuje także kropka (.) po znaku @ (czyli w części domenowej). Podpowiedź: możesz użyć indexOf do znalezienia pozycji @ i lastIndexOf('.') do znalezienia ostatniej kropki, a następnie sprawdzić ich relację.
3. Dodaj do formularza rejestracji pole "potwierdź hasło". Zaimplementuj sprawdzenie, czy oba hasła wpisane przez użytkownika są identyczne. Jeśli nie, pokaż błąd "Hasła nie zgadzają się".
4. (Myślenie) Zastanów się, które walidacje lepiej wykonywać po stronie front-end (w przeglądarce), a jakie koniecznie także po stronie back-end (na serwerze). Dlaczego walidacja po stronie użytkownika nie powinna być jedyną linią obrony przed błędnymi danymi?

Wskazówka do myślenia: walidacja po stronie front-end poprawia doświadczenie użytkownika i zmniejsza liczbę zbędnych żądań do serwera, ale nie zastępuje walidacji serwerowej — użytkownik może obejść walidację po stronie klienta (np. manipulując kodem), więc krytyczne sprawdzenia (uprawnienia, formaty danych, ochrona przed SQL/HTML injection itp.) muszą być powtórzone na serwerze.