How to display form error in bootstrap style gracefully

Questions Components & MVC
1

Is there other ways to add custom class to a form?
My related form class(if I wanna to add some attributes like class, can I define it in this part?):

class MemberForm extends Form implements InputFilterProviderInterface
{
    public function init() : void
    {
        $this->add([
            'name' => 'id',
            'type' => Hidden::class,
        ]);

        $this->add([
            'name' => 'username', //用户名
            'type' => Text::class,
            'options' => [
                'label' => '用户账号',
                'label_attributes' => [
                    'class' => 'form-label',
                ],
            ],
            'attributes' => [
                'class' => 'form-control',
            ],
        ]);

What I do now is to define things in the phtml view, like(write several lines at the top of the view. personally, I don’t like it, i think it is not grace):

<?php
/**
 * @var Laminas\View\Renderer\PhpRenderer $this
 */

$form->setAttribute('action', $this->url('member/index', ['action' => 'register']));
$form->setAttribute('novalidate', false);
$form->setAttribute('class', 'needs-validation');
$form->prepare();
?>

<div class="col-md-12">
    <div class="w-100 m-auto mt-3" style="max-width: 330px;">
        <div class="text-center">
            <img class="mb-4 m-auto" src="/img/avatar.jpg" alt="" width="72" height="72">
            <h1 class="h3 mb-3 fw-normal">注册账户</h1>
        </div>
        <?= $this->form()->openTag($form) ?>
            <div class="row g-3">
                <div class="col-12">
                    <?= $this->formLabel($form->get('username')) ?>
                    <?= $this->formText($form->get('username')) ?>
                    <?= $this->formElementErrors($form->get('username')) ?>
                </div>
                <div class="col-12">
                    <?= $this->formLabel($form->get('email')) ?>
                    <?= $this->formText($form->get('email')) ?>
                    <?= $this->formElementErrors($form->get('email')) ?>
                </div>

Besides, the phpstorm editer mark the first $form as red, how to resolve this, it makes me uncomfortable.

1111
1111840×510 61.2 KB

At last, I actually wanna to validate my forms like Checkout example · Bootstrap v5.3
like this style(the error style from the php backend render, not from front js.).

222
222748×793 22.9 KB

The following is my demo page https://www.3dsjs.cn/member/index/register, when I submit the form without filling contents. it shows as following, a little simple and plain.

3333
3333780×633 24.4 KB

Before I found a stackoverflow article to add a .has-error manually, but I can not find the webpage. And I don’t think it is a good way to do so. Any other more graceful moves?

Have a nice weekend!!!

2

See the example in the documentation:

And the description for this:

The same can be found in other documentations, for example:

3

You are already using the view helper FormElementErrors, only a configuration is missing:

This should produce the desired result.

4

Thank you!

First the $from problem resolved by following your advise.

11111
11111853×279 25.5 KB

I also tried the following.

/**
 * @var Laminas\View\Renderer\PhpRenderer|Laminas\Form\View\HelperTrait $this
 */

It seems no help, because the first $form is still marked red when I add the above with helperTrait inside…

2222
2222917×242 22.8 KB

Great discovery! LOL (other helperTrait can be add here like channel way in linux command), What I need to do is to collect as more helperTrait as I can.

333
333933×514 56.1 KB

5

In fact, I already configurated in global.php like this:

return [
    'db' => ...,
    'view_helper_config' => [
        'form_element_errors' => [
            'attributes'               => ['class' => 'help-inline'],
            'message_close_string'     => '</div>',
            'message_open_format'      => '<div%s>',
            'message_separator_string' => '',
            'translate_messages'       => false,
        ],
    ],
];

4444
4444866×364 19.6 KB

It can not act as I wished.

222
222748×793 22.9 KB

5555
55551098×922 124 KB

6

Use the correct class name in the attributes option, that’s why I added the link directly to the topic in the Bootstrap documentation. :wink:

7

Sorry ,I have no idea.

form-control class I have already add,
In the laminas document, inline-block class advised

In the web page you pasted above, there are valid-feedback and invalid-feedback, I tried these two classes, but I can not use two class in the form_element_errrors configuration.

Besides, I searched via google, I notice there is a has-error class involved, besides maybe form-group class involved too.

I check again the laminas document of form part. there are several helpers maybe help:
$this->formRow
$this->formInput
$this->formElement
$this->form

In my situation, formRow form not suit for me.

I use formText formLabel formElementError seperately. Ofcouse If I follow this zend framework - Lamians/ZF3: Adding CSS Class to invalid Form Fields - Stack Overflow solution1, it can reach my goal. But I think it is not simple enough, I guess there is other better way.

8

This is a simple example, no more and no less. And can and should be adapted according to your own needs.

invalid-feedback looks good as class for errors. Please describe why you cannot use it?