Zend Framework: gwiazdka przy wymaganych polach

Autor: Arkadiusz Tobiasz 13 stycznia 2012

W przypadku wymaganych pól w formularzach najczęściej oznacza się je poprzez dodanie gwiazdki. W tym wpisie chciałbym pokazać w jaki sposób można ten efekt osiągnąć w przypadku Zend Framework’a.

Oczywiście można dodawać gwiazdkę ręcznie przy podawaniu wartości danego label’a, ale takie rozwiązanie może być żmudne, a ponadto każdy może się pomylić czy o takowej gwiazdce zapomnieć. Chciałbym przedstawić przykładowy kod formularza:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?php

class Application_Form_RegisterUser extends Zend_Form
{

    public function init()
    {
        $this
            ->setMethod('post');
        $username = $this->createElement('text','username');
    $username
            ->setLabel('Nick:')
            ->setAttribs(array("size" => 40, "maxlength" => 15))
            ->setRequired(true)
            ->addFilter("StringTrim")
            ->addFilter("StripNewLines")
            ->addFilter("StripTags")
            ->addValidator("Db_NoRecordExists", true, array("table" => "users", "field" => "username", "messages" => "Istnieje już użytkownik o takim nicku, wybierz inny."))
            ->addValidator("StringLength", true, array("min" => 3, "max" => 15, "messages" => "Twoja nazwa użytkownika może mieć od 3 do 15 znaków."))
            ->addValidator('Regex', true, array("pattern" => "/^([A-Za-z0-9_.-]+)$/", "messages" => "Twoja nazwa użytkownika może składać się jedynie z liter, cyfr, kropki, poskreślenia i myślnika."));
        $email = $this->createElement('text','email');
    $email
            ->setLabel('Adres e-mail:')
            ->setAttribs(array("size" => 40, "maxlength" => 70))
            ->setRequired(true)
            ->addFilter("StringTrim")
            ->addFilter("StripNewLines")
            ->addFilter("StripTags")
            ->addValidator("Db_NoRecordExists", true, array("table" => "users", "field" => "email", "messages" => "Istnieje już użytkownik o takim adresie e-mail, wybierz inny."))
            ->addValidator("EmailAddress", true, array("messages" => "Musisz podać poprawny adres e-mail."))
            ->addValidator("StringLength", true, array("min" => 3, "max" => 70, "messages" => "Twój adres e-mail może mieć od 3 do 70 znaków."));
        $password = $this->createElement('password','password');
    $password
            ->setLabel('Hasło:')
            ->setAttribs(array("size" => 40, "maxlength" => 15))
            ->setRequired(true)
            ->addFilter("StringTrim")
            ->addFilter("StripNewLines")
            ->addFilter("StripTags")
            ->addValidator("StringLength", true, array("min" => 3, "max" => 15, "messages" => "Twoje hasło może mieć od 3 do 15 znaków."));
        $cpassword = $this->createElement('password','cpassword');
    $cpassword
            ->setLabel('Potwierdź hasło:')
            ->setAttribs(array("size" => 40, "maxlength" => 15))
            ->setRequired(true)
            ->addFilter("StringTrim")
            ->addFilter("StripNewLines")
            ->addFilter("StripTags")
            ->addValidator("StringLength", true, array("min" => 3, "max" => 15, "messages" => "Twoje hasło może mieć od 3 do 15 znaków."));
        $register = $this->createElement('submit','register');
    $register
            ->setLabel('rejestruj')
            ->setIgnore(true);
    $this->addElements(
            array(
        $username,
                $email,
                $password,
                $cpassword,
        $register,
            )
    );
        $this->setElementDecorators(array(
            array('ViewHelper'),
            array('Errors'),
            array('Label'),
            array('HtmlTag', array('tag' => 'div', 'class' => 'element-form'))
        ));
    }
}

Jest to formularz rejestracji użytkownika na stronie pisanej w Zend Framework. Jak widać wszystkie pola są wymagane i chcielibyśmy dodać informację w postaci gwiazdki, że te pola są wymagane. Oczywiście jak pisałem można dodać do wartości etykiet te gwiazdki, ale jest też inny dużo łatwiejszy sposób.

Jedyne co musimy zrobić, to ustawić odpowiednią opcję dla dekoratora Label w postaci:

1
array('Label', array('requiredSuffix' => '*'))

Oprócz opcji requiredSuffix możemy również skorzystać z innej opcji requiredPrefix, która naszą gwiazdkę dodałaby przed tekstem etykiety. Możemy również dodać odpowiedni styl, aby np. zmienić kolor naszej gwiazdki, w tym celu należy użyć kodu:

1
array('Label', array('requiredSuffix' => '<span>*</span>', 'escape' => false))

Należy wtedy pamiętać, aby ustawić wartość escape na false, czyli wyłączyć escape’owanie danych. Pozostaje tylko ustawić styl dla tego elementu:

1
2
3
label.required span {
    color: red;
}

Oczywiście można również efekt osiągnąć bez angażowania w to Dekoratora. Każda etykieta pola, które jest wymagane otrzymuje automatycznie klasę w css o nazwie required. Możemy więc w stylu strony zadeklarować odpowiednie tło z wspomnianą gwiazdką.

1
2
3
4
5
6
.required {
   background-image:url(/path/to/your/images/dir/required-field.png);
   background-position:top right;
   background-repeat:no-repeat;
   padding-right:10px;
}

Jest to alternatywne rozwiązanie do zaproponowanego w pierwszej kolejności. Na koniec jeszcze cały kod formularza:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?php

class Application_Form_RegisterUser extends Zend_Form
{

    public function init()
    {
        $this
            ->setMethod('post');
        $username = $this->createElement('text','username');
    $username
            ->setLabel('Nick:')
            ->setAttribs(array("size" => 40, "maxlength" => 15))
            ->setRequired(true)
            ->addFilter("StringTrim")
            ->addFilter("StripNewLines")
            ->addFilter("StripTags")
            ->addValidator("Db_NoRecordExists", true, array("table" => "users", "field" => "username", "messages" => "Istnieje już użytkownik o takim nicku, wybierz inny."))
            ->addValidator("StringLength", true, array("min" => 3, "max" => 15, "messages" => "Twoja nazwa użytkownika może mieć od 3 do 15 znaków."))
            ->addValidator('Regex', true, array("pattern" => "/^([A-Za-z0-9_.-]+)$/", "messages" => "Twoja nazwa użytkownika może składać się jedynie z liter, cyfr, kropki, poskreślenia i myślnika."));
        $email = $this->createElement('text','email');
    $email
            ->setLabel('Adres e-mail:')
            ->setAttribs(array("size" => 40, "maxlength" => 70))
            ->setRequired(true)
            ->addFilter("StringTrim")
            ->addFilter("StripNewLines")
            ->addFilter("StripTags")
            ->addValidator("Db_NoRecordExists", true, array("table" => "users", "field" => "email", "messages" => "Istnieje już użytkownik o takim adresie e-mail, wybierz inny."))
            ->addValidator("EmailAddress", true, array("messages" => "Musisz podać poprawny adres e-mail."))
            ->addValidator("StringLength", true, array("min" => 3, "max" => 70, "messages" => "Twój adres e-mail może mieć od 3 do 70 znaków."));
        $password = $this->createElement('password','password');
    $password
            ->setLabel('Hasło:')
            ->setAttribs(array("size" => 40, "maxlength" => 15))
            ->setRequired(true)
            ->addFilter("StringTrim")
            ->addFilter("StripNewLines")
            ->addFilter("StripTags")
            ->addValidator("StringLength", true, array("min" => 3, "max" => 15, "messages" => "Twoje hasło może mieć od 3 do 15 znaków."));
        $cpassword = $this->createElement('password','cpassword');
    $cpassword
            ->setLabel('Potwierdź hasło:')
            ->setAttribs(array("size" => 40, "maxlength" => 15))
            ->setRequired(true)
            ->addFilter("StringTrim")
            ->addFilter("StripNewLines")
            ->addFilter("StripTags")
            ->addValidator("StringLength", true, array("min" => 3, "max" => 15, "messages" => "Twoje hasło może mieć od 3 do 15 znaków."));
        $register = $this->createElement('submit','register');
    $register
            ->setLabel('rejestruj')
            ->setIgnore(true);
    $this->addElements(
            array(
        $username,
                $email,
                $password,
                $cpassword,
        $register,
            )
    );
        $this->setElementDecorators(array(
            array('ViewHelper'),
            array('Errors'),
            array('Label', array('requiredSuffix' => '<span>*</span>', 'escape' => false))
            array('HtmlTag', array('tag' => 'div', 'class' => 'element-form'))
        ));
    }
}

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]