Javascript i sprawdzanie formularzy

Niedawno znalezione: wygodna biblioteka ułatwiająca sprawdzanie poprawności danych wpisanych w formularzu, jeszcze przed wysłaniem ich do serwera. Samo sprawdzanie to nic nowego, ale tę bibliotekę spośród innych rozwiązań wyróżnia sposób, w jaki określa się poprawną zawartość: poprzez atrybut class pól formularzy i odpowiednio zdefiniowane, ogólne funkcje testujące.

Łatwiej to zademonstrować niż opowiedzieć:

Ten fragment tworzy formularz z trzema polami: miejscem na email, hasło oraz listę używanych programów. Każde z nich ma przypisaną klasę, która określa jaką zawartość należy wymuszać:

1. email: chciałbym, żeby można było wpisać adres email w najczęściej używanej, prostej postaci – użytkownik@domena.gdzieśtam (klasa simple_email),
2. hasło: powinno to być sensowne hasło (klasa sane_password),
3. używane shelle: należy wybrać przynajmniej jeden (klasa mandatory).

Jak widać, formularz pomimo dodania tej informacji nadal jest prosty i czytelny. Pozostaje jeszcze zdefiniować funkcje sprawdzające poprawność pól:

Klasa mandatory już jest zdefiniowana w bibliotece, więc nie trzeba jej dodawać. Funkcje te mogą być wspólne dla wielu formularzy, więc najlepiej umieścić je w osobnym pliku .js, wspólnym dla całego serwisu. Zostało już tylko włączenie sprawdzania formularzy poprzez wykonanie po załadowaniu strony:

Form.Validator.installForAllForms({'validators':Validators});

I już, efekt można obejrzeć tutaj. Jakie dokładnie są zalety takiego podejścia? Po kolei:

1. formularze zawierają informacje o danych w postaci zwięzłej i czytelnej i dla maszyny, i dla człowieka,
2. definicje funkcji testowych są zebrane w jednym, wspólnym dla całego serwisu miejscu, co oznacza że ewentualna zmiana sane_password dla wszystkich formularzy na coś bardziej skomplikowanego będzie szybka i wygodna,
3. to, co trzeba napisać samemu, zostało ograniczone do naprawdę niezbędnego minimum: biblioteka faktycznie zawiera całą wspólną część kodu.

Uwaga, na wszelki wypadek: całe to sprawdzanie po stronie klienta oczywiście nie oznacza, że można zrezygnować z kontroli danych na serwerze. Nie należy mieć zaufania do przeglądarki. I nie o to tu chodzi, żeby całkowicie przenieść testy na klienta, tylko o szybsze poinformowanie użytkownika że coś wpisał źle.

Rozwiązanie ma jedną wadę: poprawność trzeba sprawdzać w dwóch miejscach, najprawdopodobniej w dwóch różnych językach programowania (ktoś tu pisze kod po stronie serwera w JS?), co oznacza powtarzanie informacji. Trzeba będzie się przyjrzeć, czy w takim Django dałoby się wyznaczać tablicę Validators na podstawie definicji modelu

Aktualizacja 2007/10/16: Miron zwrócił uwagę, że nie działał odsyłacz do strony testowej. Poprawiłem, dzięki.

Przy okazji wprowadziłem jedną zmianę, drobną ale ważną: od teraz pola z niepoprawną zawartością są wskazywane kolorem tła. Form.Validator ustawia takim elementom klasę "invalid", więc wymagało to tylko dopisania jednej linii CSS.

O autorze: nazywam się Marcin Kaszyński i od ponad 10 lat zajmuję się tworzeniem oprogramowania, od projektowania przez programowanie do zarządzania projektami włącznie. Prowadzę warsztaty Django, będące szybkim i łatwym sposobem na poznanie tego środowiska i rozpoczęcie pracy z pełnym wykorzystaniem jego możliwości.

2006/04/06 11:05, kategorie: Programowanie, prototype.js. Odpowiedzi: RSS 2.0. Dodaj komentarz