Adding * To Required Zend_Form Field Using CSS

Loading
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;
}

Bookmark/Search this post with
AttachmentSize
required-field.png306 bytes
About the author

Sudheer is an entrepreneur and software developer. Get more from Sudheer on Twitter.


Smart solution with CSS, thx

Submitted by Guest (not verified) on Fri, 11/13/2009 - 05:07.

Smart solution with CSS, thx

You're welcome.

Submitted by sudheer on Fri, 11/13/2009 - 13:09.

You're welcome.

You could also go this

Submitted by Sebastian Hoitz (not verified) on Sun, 11/29/2009 - 18:49.

You could also go this way:

.required:after
{
content: " *";
}

and then place the star where you want it to be.

Required field

Submitted by Artur Gajewski (not verified) on Mon, 12/07/2009 - 17:22.

Just to let everyone know:

.required:after
{
content: " *";
}

This doesn't work in IE, so using the PNG image as asterisk is a good choice if you care about those poor people with IE.

So can I add an asterisk to

Submitted by Pilot on Sat, 02/06/2010 - 00:08.

So can I add an asterisk to required fields of the email php form that i use? How to paste this code there?

Thanks for the tip Here is

Submitted by Sebastian (not verified) on Thu, 04/22/2010 - 20:48.

Thanks for the tip

Here is another way of soing this:

$element->getDecorator('label')->setRequiredSuffix(' * ');

great sitte!

Submitted by automatenspiele (not verified) on Mon, 09/13/2010 - 13:03.

great sitte!

First solution simply doesn't

Submitted by Guest (not verified) on Mon, 11/15/2010 - 03:26.

First solution simply doesn't work!

Only the first solution is ok

Submitted by Martin - Webaaz (not verified) on Fri, 07/15/2011 - 15:09.

The first possibility is the only one who's accessible. Screen reader can see the *, with CSS they can't !

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>. The supported tag styles are: <foo>, [foo].

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
By submitting this form, you accept the Mollom privacy policy.