Kolorowanie pól formularz w przypadku błędów
W tym wpisie chciałbym pokazać w jaki sposób zmienić styl pola tekstowego, gdy nie przejdzie on walidacji. Problem zostanie rozwiązany za pomocą CSS – zostanie dodana odpowiednia klasa dla input’a z błędnie wprowadzonymi danymi – po prawej na poniższym rysunku.
Bierzemy się do dzieła.
Pierwsze co będziemy potrzebować to definicja klasy CSS dla błędnego input’a – nazwę ją inputError.
- form input.inputError {
- border-color: #B94A48;
- color: #B94A48;
- }
Ten wpis spowoduje utworzenie czerwonej ramki dla pola tekstowego. Teraz należy to obsłużyć wykorzystując do tego komponent Zend_Form. W tym celu zostanie wykorzystana metoda setAttrib z odpowiednimi parametrami (dodanie klasy oraz jej nazwę). W celu ułatwienia tego procesu dla większej liczby kontrolek można napisać metodę w formularzu, która będzie dodawała klasę CSS do inputa w przypadku wystąpienia błędu:
- public function highlightErrorElements()
- {
- foreach($this->getElements() as $element) {
- if($element->hasErrors()) {
- $element->setAttrib('class', 'inputError');
- }
- }
- }
Ostatnią rzeczą jaka pozostała to wywołanie tej metody w kontrolerze na obiekcie-formularzu:
- if($form_register->isErrors()) {
- $form_register->highlightErrorElements();
- $form_register->populate($_POST);
- }
Teraz jeśli formularz będzie zawierał błędy, to jego pola tekstowe zostaną obramowane w kolorze czerwonym.