How can I stop Zend Form errors from being rendered as unordered lists?

Question

Currently, error messages on my Zend Form render like this below the elements:

<ul class="errors">
    <li>A password is required.</li>
</ul>

I don't like this. How can I make it something like this instead:

<div class="errors">
    <p>A password is required.</p>
</div>

Things I've tried:

• Removing and re-declaring the Errors decorator:

  $password->removeDecorator("Errors");
  $password->addDecorator("Errors", array("tag" => "div"));
  

  Doesn't work; I get this:

  <ul tag="div" class="errors">
      <li>A password is required.</li>
  </ul>
  

• Wrapping other HtmlTag decorators around the Errors decorator. All this does is add style to the list. For example, I've tried adding <strong></strong> tags but instead of replacing the list, the tags get wrapped around it, producing a bold list.

• Asking real nicely using Intercal's PLEASE operator:

  PLEASE $password->removeDecorator("Errors");
  PLEASE $password->addDecorator("Errors", array("tag" => "div"));
  

  Ok, well maybe I haven't tried that. But, the point is I can't think of anything else to try :)

Answer 1

The first issue is that default Errors decorator expects an array of errors on which to operate; you might have several validators attached to that element. That's why an unordered list works pretty well for that situation.

However, your desired output suggests a single message per element, so the question becomes: Where you want that message to originate? Do you want to specify that single message irrespective of the messages produced by the validators, or do you want to pull, say, the first message from all the error messages generated by your validators (though, I presume there would only be a single validator, that's how you know there is only a single message you want)?

In either case, I see a custom decorator. In each case, the render() method would inspect the errors on the element and in the presence of the errors, you "grab the error message" and render the markup you desire.

In the former case - you want to specify a single message, irrespective of the messages produced by the validators themselves - your custom decorator could accept a single option 'message'.

In the latter case, you just grab the first error message.

As always, when writing custom decorators, you would probably put them in your own pseudo-namespace and then register that namespace with the element.

Alternatively, I might have misread your intention. Perhaps you are open to having multiple <p> tags. In that case, you can use the standard Errors decorator, but you need it to call a custom FormErrors view helper extending the standard FormErrors view-helper that overrides the protected members like so:

protected $_htmlElementEnd       = '</p></div>';
protected $_htmlElementStart     = '<div%s><p>';
protected $_htmlElementSeparator = '</p><p>';

As always, you would probably put your custom view helper into your own pseudo-namespace and register that namespace with the view object.

Nothing fully written or tested, just some thoughts/ideas. Hope it helps!