how to decorate the error message

Question

this is the decorator code

$mydecorate = array( 
      'ViewHelper', 
      array('Errors', array('placement' => 'append','class' => 'error')),
      array('Label', array('separator' => '')),
      array('HtmlTag', array('tag' => 'p', 'class' => 'element-form'))
      );

html result of two input elements with the above decorator:

<p class="element-form">
    <label for="firstname" class="required">First Name:</label>
    <input name="firstname" id="firstname" value="" type="text">
</p><ul class="error"><li>required field!</li></ul>
<p class="element-form">
    <label for="lastname" class="required">Last Name:</label>
    <input name="lastname" id="lastname" value=""  type="text">
</p><ul class="error"><li>required field!</li></ul>

I'd like the error message to be placed inside the p.element-form tag, any idea pleas?

thanks

Answer 1

It's not working because it's invalid to have an unordered list inside a paragraph.

You should change the paragraph to a div or another element that makes sense semantically. Then the ViewHelper will put the unordered list of errors right after the input, at the end of the div. You won't have to write any extra code, and the html will be valid. Just change 'p' to 'div' in your HtmlTag decorator.

array('HtmlTag', array('tag' => 'div', 'class' => 'element-form'))

<div class="element-form">
    <label for="firstname" class="required">First Name:</label>
    <input name="firstname" id="firstname" value="" type="text">
    <ul class="error">
      <li>required field!</li>
    </ul>
</div>