I am trying to render a Foundation 5 form with Abide validation using Zend Form. I am still struggling to fully understand how to use Zend's ViewHelpers and Decorators to render the form with the divs required by Foundation-- I can wrap a form element in a properly classed div, but I can't put several elements in a <div class="row"> for example.
Here is what I am unable to accomplish:
1) Assigning a class to each form element's parent div. I can assign every wrapper div the same class (see my code below) but not to an individual element. When I tried to add a $element->setAttrib('class','small-##') it applied it to the <input /> element, not that wrapper div. For example firstName and lastName should be class="small-6" while company on the next row is class="small-12"
2) Placing multiple form elements in a <div class="row"> tag and then doing it again for the next form row. Right now I can put each element in a row, but I don't know how to put multiple elements into the same <div class="row">.
3) In the Foundation examples, the <label> tags wrap around the <input> tag, but Zend closes the label before the input. Does this matter?
Here is the HTML I want to render:
<form method="post" action="" enctype="multipart/form-data" data-abide>
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="small-2 columns">
<label for="display" class="inline">Display For: </label>
</div>
<div class="small-10 columns">
<input type="radio" name="display" value="0" id="displayEveryone" checked><label for="displayEveryone" class="inline">Everyone</label>
<input type="radio" name="display" value="999" id="displaySelf"><label for="displaySelf" class="inline">Only Me</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-6 columns">
<label>First Name
<input type="text" required class="contact" name="firstName" id="firstName" maxlength="25" autofocus="autofocus"/>
</label>
<small class="error">First name is required.</small>
</div>
<div class="small-6 columns">
<label>Last Name
<input type="text" required class="contact" name="lastName" id="lastName" maxlength="25"/>
</label>
<small class="error">Last name is required.</small>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<label>Company or Affiliation
<input type="text" class="contact" name="company" id="company" maxlength="125"/>
</label>
</div>
</div>
<div class="row">
<div class="small-4 columns">
<label>Work Phone
<input type="text" class="contact" name="workPhone" id="workPhone" />
</label>
</div>
<div class="small-4 columns">
<label>Cell Phone
<input type="text" class="contact" name="cellPhone" id="cellPhone" />
</label>
</div>
<div class="small-4 columns">
<label>Home Phone
<input type="text" class="contact" name="homePhone" id="homePhone" />
</label>
</div>
</div>
</form>
And here is the Zend form script I presently have and needs to be changed:
class Application_Form_Contact extends Zend_Form
{
public function init()
{
$this->setMethod('post');
$this->setName('addContact');
$this->setAttrib('enctype', 'multipart/form-data') ;
$id = new Zend_Form_Element_Hidden('contactID');$id->addFilter('Int');
$display= new Zend_Form_Element_Radio('display');
$display->setLabel('Display For: ')
->setRequired(true)
->addMultiOptions(array(0 => "Everyone", 999 => "Only Me"));
$fName = new Zend_Form_Element_Text('firstName');
$fName->setLabel('First Name: ')
->setRequired(true)
->setAttrib('maxlength', 25)
->setAttrib('autofocus', 'autofocus')
->addFilter('StripTags')
->addFilter('StringTrim');
$lName = new Zend_Form_Element_Text('lastName');
$lName->setLabel('Last Name: ')
->setRequired(true)
->setAttrib('maxlength', 25)
->addFilter('StripTags')
->addFilter('StringTrim');
$company = new Zend_Form_Element_Text('company');
$company->setLabel('Company: ')
->setRequired(false)
->setAttrib('maxlength', 125)
->addFilter('StripTags')
->addFilter('StringTrim');
$workPhone = new Zend_Form_Element_Text('workPhone');
$workPhone->setLabel('Work Phone: ')
->setRequired(false)
->setAttrib('class', 'small-4')
->addFilter('StripTags')
->addFilter('StringTrim');
$cellPhone = new Zend_Form_Element_Text('cellPhone');
$cellPhone->setLabel('Cell Phone: ')
->setRequired(false)
->setAttrib('class', 'small-4')
->addFilter('StripTags')
->addFilter('StringTrim');
$homePhone = new Zend_Form_Element_Text('homePhone');
$homePhone->setLabel('Home Phone: ')
->setRequired(false)
->setAttrib('class', 'small-4')
->addFilter('StripTags')
->addFilter('StringTrim');
$otherPhone = new Zend_Form_Element_Text('otherPhone');
$otherPhone->setLabel('Other Phone: ')
->setRequired(false)
->addFilter('StripTags')
->addFilter('StringTrim');
$submit = new Zend_Form_Element_Submit('submit');
$submit->setAttrib('id', 'submitbutton');
$this->addElements(array($id, $display, $fName, $lName, $company, $workPhone, $cellPhone, $homePhone, $otherPhone, $submit));
$this->setElementDecorators(array(
'ViewHelper',
array('Description'),
array('Errors'),
array(array('data' => 'HtmlTag'), array('tag' => 'div', 'class'=>'small-6 columns')),
array('Label'),
array(array('row' => 'HtmlTag'), array('tag' => 'div', 'class'=> 'row'))
));
$submit->setDecorators(array(
'ViewHelper',
array(array('data' => 'HtmlTag')),
array(array('row' => 'HtmlTag'))
));
$this->setDecorators(array(
'FormElements',
array('HtmlTag', array('tag' => 'div', 'class'=>'small-12 columns')),
array('Form', array('data-abide'=>'data-abide'))
));
$view = $this->getView();
$formErrors = $view->getHelper('formErrors');
$formErrors->setElementStart('<small class="error">')
->setElementSeparator('')
->setElementEnd('</small>');
}
}
Thank you for your help.
Default Decorators Do Not Need to Be Loaded
By default, the default decorators are loaded during object initialization. You can disable this by passing the 'disableLoadDefaultDecorators' option to the constructor:
$element = new Zend_Form_Element('foo',
array('disableLoadDefaultDecorators' => true)
);
Create a view and add your form elements like this:
<?php echo $this->YourFormObject->getElement('YourElementID'); ?>
I have done this hope this helpful to you...