Walidacja

Formularz umie już blokować pola, wymagać ich i liczyć wartości. Teraz uczymy go mówić użytkownikowi, co jest źle — od razu przy wpisywaniu, a nie dopiero po kliknięciu „Zapisz”.

Walidacja pola (validExpression)

• Działa inaczej niż reguły z poprzednich lekcji. Zwraca jedno z dwojga:
  • true — wartość jest poprawna,
  • tekst błędu — wartość jest błędna, a tekst wyświetla się w podpowiedzi na podświetlonym na czerwono polu.
• Jednym wyrażeniem jednocześnie sprawdzasz i mówisz, co jest nie tak.

Przykład: data „Do” nie wcześniejsza niż „Od”

• Na polu Do wyrażenie:
  • odczytuje datę Od przez data(), a bieżącą wartość pola przez value(),
  • sprawdza, czy obie daty są uzupełnione,
  • zamienia je na daty i porównuje,
  • zwraca komunikat, gdy „Do” jest wcześniejsza.
• To walidacja krzyżowa: reguła na jednym polu zależy od drugiego.
• Gdy zmienisz datę Od na późniejszą, pole Do robi się czerwone, chociaż go nie dotykasz. Walidacja przelicza się przy każdej zmianie dowolnego pola na formularzu.

Reguła dla kilku pól: komponent validationError

• Niektóre reguły nie należą do jednego pola. Przykład: urlop na żądanie może trwać najwyżej jeden dzień — reguła dotyczy i rodzaju nieobecności, i liczby dni.
• Zamiast rozpisywać logikę na oba pola, wstawiasz na formularz komponent validationError (np. na końcu, z kluczem validation). W jego wyrażeniu sprawdzasz rodzaj i liczbę dni i zwracasz komunikat.
• Dopóki reguła nie jest spełniona, użytkownik widzi błąd, a formularza nie da się zapisać.

Dwie warstwy sprawdzania

• Formularz — sprawdza od razu przy edycji i pokazuje na czerwono, które pole jest złe. Idealny do wymagalności, formatu, zakresu i zależności między polami. Działa jednak w przeglądarce.
• Proces — sprawdza po kliknięciu „Zapisz”, na serwerze, jak sprawdzenie pracownika z lekcji 4. Tam możesz wpisać dowolną logikę.
• Czasem warto sprawdzić w procesie to samo, czego pilnuje już formularz.

Zapamiętaj

validExpression zwraca true albo tekst błędu. Reguły dla kilku pól wstawiasz w komponencie validationError. Formularz pomaga, proces pilnuje. W następnej lekcji formularz zaczyna reagować na zmiany i pobiera listę pracowników z bazy.