51. Walidacja formularzy w JavaScript

Wprowadzenie do walidacji formularzy

Walidacja formularzy to kluczowy element tworzenia interaktywnych i bezpiecznych stron internetowych. Dzięki niej możemy sprawdzić, czy dane wprowadzone przez użytkownika są poprawne, zanim zostaną przesłane do serwera. Walidacja poprawia jakość danych, zapobiega błędnym wysyłkom i zwiększa komfort użytkownika, informując go na bieżąco o ewentualnych problemach.

W JavaScript walidację można przeprowadzać na dwa sposoby:

Walidacja po stronie klienta (client-side): Wykonuje się w przeglądarce użytkownika za pomocą JavaScriptu. Jest szybka i interaktywna.
Walidacja po stronie serwera (server-side): Wykonuje się na serwerze, po wysłaniu formularza. Jest niezbędna dla bezpieczeństwa.

Podstawowe metody walidacji

JavaScript oferuje kilka metod do walidacji formularzy. Oto najważniejsze z nich:

Sprawdzanie, czy pole nie jest puste.
Walidacja formatu danych (np. adres e-mail, numer telefonu).
Sprawdzanie długości wprowadzonego tekstu.
Porównywanie wartości pól (np. hasło i powtórzone hasło).

Przykład: Sprawdzanie, czy pole nie jest puste

                function sprawdzPole(pole) {

                if (pole.value.trim() === "") {

                pole.style.borderColor = "red";

                return false;

                } else {

                pole.style.borderColor = "green";

                return true;

                }

                }

Walidacja w czasie rzeczywistym

Walidacja w czasie rzeczywistym (ang. *real-time validation*) polega na sprawdzaniu poprawności danych podczas ich wprowadzania. Dzięki temu użytkownik otrzymuje natychmiastową informację zwrotną, co poprawia doświadczenie użytkownika.

Przykład: Walidacja pola e-mail w czasie rzeczywistym

Adres e-mail:

                const emailInput = document.getElementById("emailInput");

                const emailError = document.getElementById("emailError");

                emailInput.addEventListener("input", () => {

                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

                if (!emailRegex.test(emailInput.value)) {

                emailError.textContent = "Niepoprawny format adresu e-mail!";

                emailInput.style.borderColor = "red";

                } else {

                emailError.textContent = "";

                emailInput.style.borderColor = "green";

                }

                });

Walidacja przed wysłaniem formularza

Walidacja przed wysłaniem formularza (ang. *form submission validation*) polega na sprawdzeniu poprawności wszystkich danych przed ich wysłaniem na serwer. Jest to kluczowy krok, aby zapewnić, że tylko poprawne dane są przesyłane.

Przykład: Walidacja formularza przed wysłaniem

                const form = document.getElementById("demoForm");

                form.addEventListener("submit", (e) => {

                const nameInput = document.getElementById("nameInput");

                const emailInput = document.getElementById("emailInput2");

                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

                if (nameInput.value.trim() === "") {

                alert("Pole 'Imię' nie może być puste!");

                e.preventDefault();

                return;

                }

                if (!emailRegex.test(emailInput.value)) {

                alert("Niepoprawny format adresu e-mail!");

                e.preventDefault();

                return;

                }

                });

Zaawansowane techniki walidacji

Oprócz podstawowych metod walidacji, istnieją również bardziej zaawansowane techniki, które mogą być przydatne w specyficznych przypadkach:

Walidacja asynchroniczna: Sprawdzanie poprawności danych na serwerze bez przeładowywania strony.
Walidacja z użyciem wyrażeń regularnych: Precyzyjne sprawdzanie formatu danych.
Walidacja zależna od innych pól: Sprawdzanie poprawności danych na podstawie wartości innych pól.

Przykład: Walidacja hasła

                function sprawdzHaslo(haslo) {

                const hasloRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

                return hasloRegex.test(haslo);

                }

                console.log(sprawdzHaslo("Haslo123!")); // true

                console.log(sprawdzHaslo("haslo")); // false

Dobre praktyki walidacji formularzy

Podczas tworzenia walidacji formularzy warto pamiętać o kilku zasadach, które pomogą zapewnić poprawność i użyteczność:

Informuj użytkownika o błędach: Wyświetlaj komunikaty o błędach w jasny i zrozumiały sposób.
Waliduj na bieżąco: Używaj zdarzenia input lub blur, aby informować użytkownika o błędach podczas wypełniania formularza.
Nie polegaj tylko na walidacji po stronie klienta: Zawsze wykonuj również walidację po stronie serwera.
Używaj atrybutów HTML5: np. required, type="email", minlength, aby uprościć walidację.

Podsumowanie

Walidacja formularzy to nie tylko kwestia techniczna, ale także element dbałości o doświadczenie użytkownika. Dobrze zaprojektowana walidacja sprawia, że formularze są intuicyjne, a użytkownicy chętniej z nich korzystają. Dzięki JavaScript możemy tworzyć dynamiczne i interaktywne formularze, które poprawiają jakość wprowadzanych danych i zwiększają satysfakcję użytkowników.

Pamiętaj, że walidacja po stronie klienta jest szybka i wygodna, ale zawsze powinna być uzupełniona walidacją po stronie serwera, aby zapewnić pełne bezpieczeństwo i poprawność danych.