I need to wrap zend form error messages in custom html.
<div class="cerror" id="ID-error">
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" id="IDerror-msg">
%ZEND_FORM_ERROR_MESSAGE%
</div>
</div>
</div>
Now I get errors in format:
<ul>
<li>Error message</li>
</ul>
I need:
<div class="cerror" id="EMAIL-error">
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" id="EMAIL-error-msg">
<ul>
<li>Error message</li>
</ul>
</div>
</div>
</div>
Thank you!
I have following code:
$element->clearDecorators();
$element->removeDecorator('DtDdWrapper');
$element->addDecorator('ViewHelper');
$element->addDecorator('Description', array('tag' => 'p', 'class' => 'description'));
$element->addDecorator('Label', array('tag' => null));
$element->addDecorator(array('row' => 'HtmlTag'), array('tag' => 'div', 'class' => 'form-line'));
How to wrap errors in 3 div tags? Thank!
$element->clearDecorators();
$element->addDecorator('Errors');
$element->addDecorator(array('div1' => 'HtmlTag'), array('tag' => 'div',
'class' => 'cerror', 'id' => 'EMAIL-error'));
$element->addDecorator(array('div2' => 'HtmlTag'), array('tag' => 'div',
'class' => 'ui-widget'));
$element->addDecorator(array('div3' => 'HtmlTag'), array('tag' => 'div',
'class' => 'ui-state-error ui-corner-all',
'id' => 'EMAIL-error-msg'));
$element->addDecorator('ViewHelper');
$element->addDecorator('Description', array('tag' => 'p', 'class' => 'description'));
$element->addDecorator('Label', array('tag' => null));
$element->addDecorator(array('row' => 'HtmlTag'), array('tag' => 'div', 'class' => 'form-line'));
Related
I need this markup for file input:
<label class="col-sm-12">File upload</label>
<div class="col-sm-12">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="...">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a
</div>
<ul class="errors">
<li>Some error</li>
</ul>
</div>
I tried it like that:
<label class="col-sm-12">Attachment</label>
<div class="col-sm-12">
<?php echo $this->form->attachment; ?>
</div>
With very difficult decorator:
$this->fileDecorator = array(
array(
array('divOpen' => 'HtmlTag'), array('tag' => 'div', 'class' => 'form-control', 'data-trigger' => 'fileinput', 'openOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND)
),
array(
array('i' => 'HtmlTag'), array('tag' => 'i', 'class' => 'glyphicon glyphicon-file fileinput-exists', 'placement' => Zend_Form_Decorator_Abstract::APPEND)
),
array(
array('span' => 'HtmlTag'), array('tag' => 'span', 'class' => 'fileinput-filename', 'placement' => Zend_Form_Decorator_Abstract::APPEND)
),
array(
array('divClose' => 'HtmlTag'), array('tag' => 'div', 'closeOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND)
),
array(
array('spanOpen' => 'HtmlTag'), array('tag' => 'span', 'class' => 'input-group-addon btn btn-default btn-file', 'openOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND)
),
array(
'Callback',
array('callback' =>
function($content, $element, $options) {
return "<span class=\"{$options['class']}\">{$options['text']}</span><span class=\"{$options['class2']}\">{$options['text2']}</span>";
},
'class' => 'fileinput-new',
'text' => $this->translator->_('_selectFile'),
'class2' => 'fileinput-exists',
'text2' => $this->translator->_('_change')
)
),
'File',
array(
array('spanClose' => 'HtmlTag'), array('tag' => 'span', 'closeOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND)
),
array(
'Callback',
array('callback' =>
function($content, $element, $options) {
return "{$options['text']}";
},
'class' => 'input-group-addon btn btn-default fileinput-exists',
'text' => $this->translator->_('_remove'),
'data-dismiss' => 'fileinput'
)
),
array(
array('div' => 'HtmlTag'), array('tag' => 'div', 'class' => 'fileinput fileinput-new input-group', 'data-provides' => 'fileinput')
),
'Errors'
);
But problem is, that Callback can be only once in decorator (not like HtmlTag). And tag with content is not possible add without callback. It can be solved with more callbacks or differently?
Edit:
I have idea. Is possible to add File decoratror to Callback decorator?
It is simple like that:
<div class="form-group<?php echo count($this->form->attachment->getErrors()) ? ' has-error has-feedback' : null; ?>">
<label class="col-sm-12"><?php echo $this->form->attachment->renderLabel(); ?></label>
<div class="col-sm-12">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<?php echo $this->form->attachment->renderFile(); ?>
</span>
Remove
</div>
<?php echo $this->formErrors($this->form->attachment->getMessages()); ?>
</div>
</div>
I got a new theme for which i need to edit my decorators.
Most of it i got working except for the checkbox and radio.
<!-- Previously -->
<div class="form-group ">
<label for="mobileTheme" class="col-lg-2 control-label optional">Mobiel thema</label>
<div class="col-lg-5">
<div class="checkbox">
<input type="hidden" name="mobileTheme" value="0" />
<input type="checkbox" name="mobileTheme" id="mobileTheme" value="1" class=" " />
</div>
<span class="help-block">Redirect mobiele gebruikers naar een eigen domein met eigen thema</span>
</div>
</div>
<!-- After -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<i class="input-helper"></i>
Remember me
</label>
</div>
</div>
</div>
My decorator looks like this now:
'checkbox' => array(
'decorators' => array(
'ViewHelper',
array(array('input' => 'HtmlTag'), array('tag' => 'div', 'class' => 'checkbox')),
array('Errors', array('class' => 'help-inline')),
array('Description', array('tag' => 'span', 'class' => 'help-block')),
array('Label', array('class' => 'col-lg-2 control-label')),
array('HtmlTag', array('tag' => 'div', 'class' => 'col-lg-5')),
'ElementWrapper'
),
'options' => array(
'class' => '',
),
),
The issue i'm struggling with is that i don't know how to order the decorators right so that label is now within the col-*-* class
I got it working,
'checkbox' => array(
'decorators' => array(
'ViewHelper',
array('AdditionalElement', array('placement' => 'APPEND', 'tag' => 'i', 'class' => 'input-helper')),
array(array('input' => 'HtmlTag'), array('tag' => 'div', 'class' => 'checkbox')),
array('Errors', array('class' => 'help-inline')),
array('Description', array('tag' => 'span', 'class' => 'help-block')),
array('HtmlTag', array('tag' => 'div', 'class' => 'col-lg-5')),
array('Label', array('class' => 'col-lg-2 control-label')),
'ElementWrapper'
),
'options' => array(
'class' => '',
),
),
AdditionalElement is my own custom class for implementing any piece of html.
Is there a way to add the type of input-element to a class attribute on a wrapping tag?
In the example code below it could be the 'Div' decorator that already has the class of 'element' OR the LI-tag.
(I have ommitted some code)
class My_Form extends Zend_Form
{
public function loadDefaultDecorators($disableLoadDefaultDecorators = false)
//Set the decorators we need:
$this->setElementDecorators(array(
'ViewHelper',
'Errors',
array('Description', array('tag' => 'p', 'class' => 'description', 'escape' => false)),
array('decorator' => array('Div' => 'HtmlTag'), 'options' => array('tag' => 'div', 'class' => 'element')),
array('Label', array('escape' => false)),
array('decorator' => array('Li' => 'HtmlTag'), 'options' => array('tag' => 'li')),
));
}
}
OR if it's possible to create My_Form_Element, and automaticly have all Zend_Form_Element_XXX extend from that.
I would like to end out with markup like this
<form>
<ul>
<li>
<label for="contactForm-contact_subject" class="optional">Regarding:</label>
<div class="element form-input-text"><input type="text" name="contactForm[contact_subject]" id="contactForm-contact_subject" value="" /></div>
</li>
<li>
<label for="contactForm-contact_message" class="required">Message:</label>
<div class="element form-textarea"><textarea name="contactForm[contact_message]" id="contactForm-contact_message" rows="24" cols="80"></textarea></div>
</li>
<li>
<div class="element form-input-submit"><input type="submit" name="contactForm[form_contact_submit]" id="contactForm-form_contact_submit" value="form_contact_submit" /></div>
</li>
</ul>
</form>
Just override render method:
class My_Form extends Zend_Form
{
public function loadDefaultDecorators($disableLoadDefaultDecorators = false)
{
//Set the decorators we need:
$this->setElementDecorators(array(
'ViewHelper',
'Errors',
array('Description', array('tag' => 'p', 'class' => 'description', 'escape' => false)),
array('decorator' => array('Div' => 'HtmlTag'), 'options' => array('tag' => 'div', 'class' => 'element')),
array('Label', array('escape' => false)),
array('decorator' => array('Li' => 'HtmlTag'), 'options' => array('tag' => 'li')),
));
}
public function render(Zend_View_Interface $view = null)
{
/* #var $element Zend_Form_Element */
foreach ($this->getElements() as $element) {
$type = end(explode('_', $element->getType()));
$element->getDecorator('Div')->setOption('class',
sprintf('%s form-%s', 'element', strtolower($type)));
}
return parent::render($view);
}
}
Here is my code
private $elementDecorators = array(
'ViewHelper',
'Errors',
array(array('data' => 'HtmlTag'), array('tag' => 'td')),
array('Label', array('tag' => 'td','class'=>'blue-color','placement'=>'prepend')),
array(array('row' => 'HtmlTag'), array('tag' => 'tr')),
);
public function init()
{
$username = new Zend_Form_Element_Text('username',array(
'decorators' =>$this->elementDecorators,
'label' =>'Username',
'required' =>true,
'span' =>array('class'=>'validation','id'=>'unameInfo'),
));
}
$this->addElements(array(
$username
));
$this->setDecorators(array(
'FormElements',
array('HtmlTag',
array('tag'=>'table', 'width' => '100%')
),
'Form'
));
Form created for above code is as below
<tr>
<td id="username-label"><label for="username" class="blue-color required">Username</label></td>
<td><input type="text" name="username" id="username" value="" span="Array"></td>
</tr>
I want following html
<tr>
<td id="username-label"><label for="username" class="blue-color required">Username</label></td>
<td>
<input type="text" name="username" id="username" value="" span="Array">
<span class="validation" id="userinfo"></span>
</td>
</tr>
How can i add span tag in my above zend form code?
Thank you in advance
You can use the AnyMarkup decorator.
$username = new Zend_Form_Element_Text('username',array(
'decorators' => array(
'ViewHelper',
array('AnyMarkup', array('markup' => 'your-markup-here', 'placement' => 'append')),
'Errors',
array(array('data' => 'HtmlTag'), array('tag' => 'td')),
array('Label', array('tag' => 'td','class'=>'blue-color','placement'=>'prepend')),
array(array('row' => 'HtmlTag'), array('tag' => 'tr')),
),
'label' => 'Username',
'required' => true,
'span' => array('class'=>'validation','id'=>'unameInfo'),
// actually, this last 'span' entry strikes me as odd
));
To add the decorator to an element using the short-form (as above) rather than creating an instance, you need to register the decorator's path/prefix with the element, something like:
$username->addPrefixPath('My_Decorator_', APPLICATION_PATH . '/../library/My/Decorator', Zend_Form_Element::DECORATOR);
You can add that prefix/path to all (currently defined) elements using the:
$form->addElementPrefixPath($prefix, $path)
method.
Try like below,
...
$submit = new Zend_Form_Element_Submit('submit', array(
'label' => 'Submit Button',
'class' => 'form-submit',
'decorators' => array(
'ViewHelper',
),
));
//$submit->removeDecorator('Label');
$this->addElement($submit);
$reset = new Zend_Form_Element_Reset('reset', array(
'label' => 'Reset Button',
'class' => 'form-reset',
'decorators' => array(
'ViewHelper',
),
));
//$submit->removeDecorator('Label');
$this->addElement($reset);
$this->addDisplayGroup(array('submit', 'reset',), 'submitButtons', array(
'order' => 10,
'decorators' => array(
'FormElements',
array(
array('data' => 'HtmlTag'),
array('tag' => 'td','class'=>'move_td')
),
array(
array('row' => 'HtmlTag', 'class' => 'element'),
array('tag' => 'tr')
)
),
));
...
This will generate code like below,
...
<td class="move_td">
<input type="submit" class="form-submit" value="Submit Button" id="submit" name="submit">
<input type="reset" class="form-reset" value="Reset Button" id="reset" name="reset">
</td>
...
Updated
Use below code to generate span
$this->addElement(
'hidden',
'dummy',
array(
'required' => false,
'ignore' => true,
'autoInsertNotEmptyValidator' => false,
'decorators' => array(
array(
'HtmlTag', array(
'tag' => 'span',
'id' => 'span-id',
'class' => 'span-class'
)
)
)
)
);
$this->dummy->clearValidators();
Now you need to use addDisplayGroup function to group html elements.
I am using zend. I am trying to set decorators for the following div structure ,
<div class="fm">
<div class="fm_text">
<div class="p_details">Debit Weight:</div>
</div>
<div class="fm_text">
<div class="txtbox">
<input type="text" name="pname" class="txtcolor">
</div>
</div>
<div class="fm_text">
<div class="p_details">Credit Weight:</div>
</div>
<div class="fm_text">
<div class="txtbox">
<input type="text" name="pname" class="txtcolor">
</div>
</div>
</div>
<div class="fm">
......
</div>
It is difficult to set decorator for above div structure.I tried with following code ,
public $requirednewElementDecorators = array(
'ViewHelper',
'Errors',
array('Description', array('escape' => false, 'tag' => 'span', 'class' => '', 'placement' => 'prepend')),
array(array('data' => 'HtmlTag'), array('tag' => 'div', 'class' => 'fm_text')),
array('Label', array('tag' => 'div', 'class' => 'p_details')
),
array('HtmlTag', array('tag' => 'div', 'class' => 'fm'))
);
I have to use zend form so that i can validate form effectively. I can use the HTML in template and continue the flow. but i dont want to do that.Kindly help me.
Two input-fields togehter? You can try it with a fieldset for the <div class="fm">...</div>. So, you must use the fieldset decorator. Why do you not want to use the <label class="p_details">DebitWeight</label> instead of <div class="p_details">Debit Weight:</div>?
This article is very helpful, maybe: http://devzone.zend.com/article/3450-Decorators-with-Zend_Form