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.

inputy.png

Bierzemy się do dzieła.

Pierwsze co będziemy potrzebować to definicja klasy CSS dla błędnego input’a – nazwę ją inputError.

  1. form input.inputError {
  2.     border-color: #B94A48;
  3.     color: #B94A48;
  4. }

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:

  1. public function highlightErrorElements()
  2. {
  3.     foreach($this->getElements() as $element) {
  4.         if($element->hasErrors()) {
  5.             $element->setAttrib('class', 'inputError');
  6.         }
  7.     }
  8. }

Ostatnią rzeczą jaka pozostała to wywołanie tej metody w kontrolerze na obiekcie-formularzu:

  1. if($form_register->isErrors()) {
  2.     $form_register->highlightErrorElements();
  3.     $form_register->populate($_POST);
  4. }

Teraz jeśli formularz będzie zawierał błędy, to jego pola tekstowe zostaną obramowane w kolorze czerwonym.