Extending Zend Form Element to create customized Phone number field

Generally, Phone numbers has different parts. Such as, country code, operator code and subscriber number etc. When taking Phone number as user input, we can worn users about phone number format by setting a hint/description and can validate using Regular Expression. But, for better usability, along with hints, some web applications provide separate (generally 3) text fields for different parts of phone number. Also, some of them keep a separator, ‘-‘ or ‘#’ between this fields.

Now, if we try provide this feature in Zend Form, that’s possible. We can create three individual Zend_Form_Element_Text objects and join there value together to make the phone number. But, in this case, validating them together is a hassle. Again, placing them inline in the form and putting separators needs some Decorator magic. What if we can make it simply another Zend Form Element which renders three text box (optionally with separator)? And consider their value jointly and validate them together using ordinary Zend Validators? Lets try.

What we are going to make?

Let’s visualize our Phone number field first and list what we want from it.

• It’s Simple. It’s rendering, validation everything is like any other ordinary Zend From Elements.
• It prints 3 text boxes for different parts of Phone number.
• When we validate it or take it’s value, the input of these three boxes jointly will be considered as the value.
• We can set a separator character to be printed between text boxes.
• We can include/exclude this separators from value.

Assumptions

Assuming that, you have used Zend_Form, Zend_From_Element_* and understand how the directory hierarchy, naming convention, Autoloading of Zend works. Also, in library directory, you keep a directory beside Zend for additional project based classes. We will refer it as Project directory and classes under it will be Project_<dir-name>_<class> etc.

Let’s do it

It’s already done :). So, please download it first.

Now I will go through the code and will tell you how it’s working. The form element class is created in “Project/Form/Element/Phone.php”. So our class name is Project_Form_Element_Phone. This class is extending Zend_Form_Element_Xhtml for getting common form element functionalities by default. Then, declared some public properties as below –

• $codeLength : array. default lengths of phone number parts
• $ignoreSeperator : boolean. flag for ignoring/including separator characters in value
• $helper : Name of default form view helper to use for rendering

In constructor, checking if codeLength and ignoreSeperator is set as attribute (using Zend_Form_Element::setAttrib). If not, adding them with attributes array with default values. Then calling parent’s constructor. Also, overwriting isValid() function for joining values of three parts. From where these 3 parts coming? Find the answer in view helper which rendering this filed.

Each Zend Form Element needs a view helper to be rendered with. Our view helper for Project_Form_Element_Phone is at “Project/View/Helper/FormPhone.php”. So, set the value of Project_Form_Element_Phone::$helper as ‘formPhone’. The secret is here, in formPhone() function. Here, I am printing three text fields named <filed-name>_country, <filed-name>_operator and <filed-name>. They will have additional class name phone_country, phone_operator and phone respectively so that we can style them from CSS. Also, the length of each part will be set as maxlength.

Check ‘Project/View/Helper/’ has been added as HelperPath and ‘Project_’ is added in Autoloader Namespaces.

BTW, if you still fetch problem in loading files or don’t want to use separate directory (referred as Project) for additional classes, you can put the Phone.php in “Zend/Form/Element” and FormPhone.php in “Zend/View/Helper” directory. Then change the class names.

How to use?

Seems everything is done. Let’s see an example how it will be used.

[php]

$primaryPhone = new Project_Form_Element_Phone(‘primary_phone’);

$primaryPhone->setLabel(‘Primary phone’)
->setAttrib(‘class’ ,’some class’ )
->setAttrib(‘separator’ ,’#’ ) // Separator between Phone number parts
->setAttrib(‘ignoreSeparator’, true) // Ignore seperators from in field value
->setDescription(‘Phone number format: XXX # XXXX # XXXXXX’)
->setValue(isset($data[‘primary_phone’]) ? $data[‘primary_phone’] : ”)
->addValidator(‘digits’);

$form->addElement($primaryPhone);

[/php]

So, is all our expectations in above list full-fulled?