Technologie i narzędzia: język PHP 5, Java, JavaScript, Python, system Zend Framework, Django, biblioteka jQuery, Smarty, platforma Eclipse, MySQL, SVN, CVS, UML, Firefox.
WebProgramming - wszystko o serwisach internetowych
O serwisach internetowych.
[php|javascript] Walidacja formularzy po stronie klienta dla Fasic_Form.
W poprzednich artykułach opisałem prostą (ale użyteczną) bibliotekę do obsługi formularzy, teraz przedstawię rozwiązanie, które umożliwia walidacje po stronie klienta (za pomocą JavaScript) - reguły walidacji generowane są na podstawie obiektu formularza (czyli Fasic_Form).
Walidacja po stronie klienta oprócz wcześniej wspomnianej biblioteki Fasic_Form została również oparta na komponentach Zend Framework oraz jQuery (jednej z najlepszych bibliotek JavaScriptowych), więc znajomość tych pozycji na pewno się przyda.
W dalszej części opieram się na pierwszym artykule omawiającym obsługę formularzy w Zend Framework, w związku z czym zalecam do zapoznania się najpierw z tym artykułem.
Aby osiągnąć cel muszę zrealizować dwa zadania:
- “zrzucić” reguły walidacji dostępne w obiekcie formularza w formacie zrozumiałym dla JavaScript
- stworzyć funkcję, która zainicjuje formularz oraz uruchomi walidację
Zanim omówię rozwiązania tych punktów, przedstawię widok standardowego formularza (zakładam, że zmienna $form jest obiektem formularza):
-
<form method="post">
-
<label for="email">Email:</label>
-
<input name="email" value="<?= $form->email ?>" type="text" />
-
<span id="error-email"> </span>
-
<label for="content">Treść:</label>
-
<textarea name="content"><?= $form->content ?>
-
<span id="error-content"> </span>
-
-
<input value="Zapisz" type="submit" />
-
<!– reguły_walidacji –>
-
</form>
W miejscu ‘reguły_walidacji’ dodamy następującą linijkę, która realizuje zadanie 1.
-
<span style="display: none" class="fasicValidation">
-
<?= Zend_Json::encode($form->getValidatorsSimple()) ?>
-
</span>
Kod ten powoduje, iż reguły walidacji zostają “zrzucone” w formacie JSON (prosty format zapisu danych, który ma bardzo fajną własność - jest poprawnym kodem JavaScript) i zapisane w niewidocznym bloku HTML. Fragment tego kodu może zostać ukryty w osobnej funkcji “widoku” (w Smarty byłaby to wtyczka, w Zend Framework helper).
Tak zapisane dane będą wykorzystywane w wtyczce do jQuery, który będzie realizował zadanie 2. Źródło tej wtyczki jest dostępne pod tym adresem i jest on stosunkowo dobrze skomentowany, więc dla osób, które znają bibliotekę jQuery wszystko powinno być jasne.
Teraz przejdziemy do ostatniego kroku - wyświetlanie błędów użytkownikowi za pomocą wcześniej przygotowanej wtyczki:
-
$(‘form’).fasicForm({
-
callbackBefore: function($form) {
-
$(‘label’, $form).css(‘color’, ”);
-
$(‘[@id^=error]‘, $form).empty();
-
},
-
callback: function(field, message) {
-
$(‘label[@for=' + field + ']‘).css(‘color’, ‘red’)
-
$(‘#error-’ + field).html(message);
-
return true;
-
}});
Gotowy przykład jest do ściągnięcia tutaj. Paczka zwiera:
- bibliotekę Fasic_Form w wersji 1.1
- wymagane komponenty Zend Framework (Zend_Json)
- bibliotekę JavaScript jQuery w wersji 1.2.1
- skrypt index.php zawierający przykład wykorzystania biblioteki Fasic_Form
Omawiany przykład można przetestować pod tym adresem.
Napisz komentarz