Adding * To Required Zend_Form Field Using CSS

Submitted by sudheer on Thu, 12/18/2008 - 00:08

You want to add an asterisk to required fields, huh?

add asterisk to zend form required element

There are many approaches to accomplish this. One among them is setting the requiredSuffix option to the label decorator of the form element. Assuming $element is your Zend_Form_Element object:

<?php
$element->getDecorator('label')->setOption('requiredSuffix', ' * ');
?>

Another option is to add the * while setting the label.

<?php
$element->setLabel('My Label *')
?>

The third, which I am currently using in one of my Zend Framework powered applications is adding * using CSS. The default label decorator generates the following mark-up.

<label class="required" for="username">Email address</label>

It sets the label class to "required". We add a four line CSS to add * next to the text that appears within the label tag. You just need an image. I have attached a sample image to this post. Feel free to use it.

Here goes the CSS

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