Add class attribute to Form Errors

Question

I´m developing an application using Zend Framework 2 and I use FormRow helper to render a label, the input and errors (if present) in a Form.

//within the view
echo $this->formRow($form->get('Name'));

When a user submits the form without filling the required input text field FormRow render´s it with the following error message:

<label>
    <span>Name: </span>
    <input class="input-error" type="text" value="" placeholder="Insert Name Here" name="Name">
</label>
<ul>
    <li>Value is required and can't be empty</li>
</ul>

How can I set a class for the li tag to style it afterwards?

I know that I can echo the formElementErrors with the desired class attribute via..

<?php echo $this->formElementErrors($form->get("Name"), array('class' => "valuerequired", 'message' => "errortestmessage")); ?>

..but FormRow will still render the error message without the class.

Just for reference I´m setting the entity this way:

public function getInputFilter()
    {
        if (!$this->inputFilter) {
            $inputFilter = new InputFilter();

            $factory = new InputFactory();

            $inputFilter->add($factory->createInput(array(
                'name'     => 'Name',
                'required' => true,
                'filters'  => array(
                    array('name' => 'StripTags'),
                    array('name' => 'StringTrim'),
                ),
                'validators' => array(
                    array(
                        'name'      => 'StringLength',
                        'options' => array(
                            'encoding' => 'UTF-8',
                            'min'      => 1,
                            'max'      => 100,
                        ),
                    ),
                ),
           )));

            $this->inputFilter = $inputFilter;
        }
        return $this->inputFilter;
    }

Answer 1

See the code of formElementErrors

Basically you could do something like:

$this->formElementErrors($elem)
     ->setMessageOpenFormat('<ul%s><li class="some-class">')
     ->setMessageSeparatorString('</li><li class="some-class">');

But that is quite unhandy...

The better solution would be to extend the Zend\Form\View\Helper\FormElementErrors by your own class and then register the view-helper formElementErrors to your class. So basically you'd have something like this:

namespace Mymodule\Form\View\Helper;

use Zend\Form\View\Helper\FormElementErrors as OriginalFormElementErrors;

class FormElementErrors extends OriginalFormElementErrors  
{
    protected $messageCloseString     = '</li></ul>';
    protected $messageOpenFormat      = '<ul%s><li class="some-class">';
    protected $messageSeparatorString = '</li><li class="some-class">';
}

Last thing then would be to register the view helper with this new Class. For this you provide the following code inside your Modules Module.php

public function getViewHelperConfig()
{
    return array(
        'invokables' => array(
            'formelementerrors' => 'Mymodule\Form\View\Helper\FormElementErrors'
        ),
    );
}

displaimer: This code isn't tested, let me know if there are some errors, but i think this should work out quite well.

Answer 2

Ok, the solution to my own problem was right in front of me, instead of using:

//within the view
echo $this->formRow($form->get('Name'));

I called each element of the form individually:

    //within the view
    echo $this->formLabel($form->get('Name'));
    echo $this->formInput($form->get('Name'));
    echo $this->formElementErrors($form->get("Name"), array('class' => "some_class", 'message' => "errormessage")); 

Don´t know if it´s the most efficient way of doing it, plz drop a line if you think otherwise.

Answer 3

FormRow check if "form_element_errors" plugin registered. And if so use it as default to display error messages.

So Sam's example work. You should redefine standard plugin and inform mvc about it.

I'v done it in module.config.php

'view_helpers' => array(
'invokables' => array(
    'formElementErrors'=> 'MyModule\View\Helper\FormElementErrors',

and FormRow start display errors as I wish :)

Answer 4

As your problem, please try

Change

//within the view
echo $this->formRow($form->get('Name'));

to

//within the view
echo $this->formRow($form->get('Name'),null,false);
// Note: add more 2 last parameters, false- for $renderErrors => will NOT render Errors Message. 
//Look original function in helper/formrow.php: function __invoke(ElementInterface $element = null, $labelPosition = null, $renderErrors = null, $partial = null)

Render Errors Message as your funciton

echo $this->formElementErrors($form->get('name'), array('class' => 'your-class-here'));

Answer 5

From the documentation of ZF2. Here's the link: http://framework.zend.com/manual/2.0/en/modules/zend.form.view.helpers.html#formelementerrors

echo $this->formElementErrors($element, array('class' => 'help-inline'));
// <ul class="help-inline"><li>Value is required and can&#039;t be empty</li></ul>

Answer 6

I use echo $this->formElementErrors($form, array('class' => "error-messages")); to show all error messages in one place:

echo $this->formElementErrors($form, array('class' => "error-messages"));// Print all error messagess

echo $this->formLabel($form->get('Name'));
echo $this->formInput($form->get('Name'));

echo $this->formLabel($form->get('Name2'));
echo $this->formInput($form->get('Name2'));