# How to display form error in bootstrap style gracefully

**URL:** <https://discourse.laminas.dev/t/how-to-display-form-error-in-bootstrap-style-gracefully/3311>\
**Category:** Components & MVC\
**Tags:** laminas-form\
**Created:** [April 21, 2023, 9:55am UTC](https://discourse.laminas.dev/t/how-to-display-form-error-in-bootstrap-style-gracefully/3311 "2023-04-21T09:55:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jobsfan](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.laminas.dev/jobsfan/32/399_2.png) [@jobsfan](https://discourse.laminas.dev/u/jobsfan)\
**Post date:** [April 21, 2023, 9:55am UTC](https://discourse.laminas.dev/t/how-to-display-form-error-in-bootstrap-style-gracefully/3311/1 "2023-04-21T09:55:22Z")

</div>

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?):

```auto
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):

```auto
<?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](https://canada1.discourse-cdn.com/flex032/uploads/zendframework/original/2X/2/22dc64b6a17f8c5a5aab65f1b4c08fe17348554a.png)

At last, I actually wanna to validate my forms like [Checkout example · Bootstrap v5.3](https://getbootstrap.com/docs/5.3/examples/checkout/)  
like this style(the error style from the php backend render, not from front js.).

 ![222](https://canada1.discourse-cdn.com/flex032/uploads/zendframework/original/2X/4/4fc9f95987b403b03683ee8c05f57b2f2033cb6a.png)

The following is my demo page [https://www.3dsjs.cn/member/index/register](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](https://canada1.discourse-cdn.com/flex032/uploads/zendframework/original/2X/a/a8163d869e9b474e67c7ffe0b32e0bfc1816113f.png)

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!!!

---

<div class="post-metadata">

**Author:** ![froschdesign](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.laminas.dev/froschdesign/32/38_2.png) [@froschdesign](https://discourse.laminas.dev/u/froschdesign)\
**Post date:** [April 21, 2023, 10:13am UTC](https://discourse.laminas.dev/t/how-to-display-form-error-in-bootstrap-style-gracefully/3311/2 "2023-04-21T10:13:46Z")

</div>

> [@jobsfan](#):
>
> Besides, the phpstorm editer mark the first $form as red, how to resolve this, it makes me uncomfortable.

See the example in the documentation:

> **[Usage in a laminas-mvc application - laminas-form - Laminas Docs](https://docs.laminas.dev/laminas-form/v3/application-integration/usage-in-a-laminas-mvc-application/#create-view-script)**
>
> Validate and display simple and complex forms, casting forms to business objects and vice versa.

And the description for this:

> **[Introduction - laminas-form - Laminas Docs](https://docs.laminas.dev/laminas-form/v3/helper/intro/)**
>
> Validate and display simple and complex forms, casting forms to business objects and vice versa.

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

> **[Introduction - laminas-i18n - Laminas Docs](https://docs.laminas.dev/laminas-i18n/view-helpers/introduction/)**
>
> Provide translations for your application, and filter and validate internationalized values.

> **[View Helper - laminas-mvc-plugin-flashmessenger - Laminas Docs](https://docs.laminas.dev/laminas-mvc-plugin-flashmessenger/view-helper/)**
>
> Plugin for creating and exposing flash messages via laminas-mvc controllers

---

<div class="post-metadata">

**Author:** ![froschdesign](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.laminas.dev/froschdesign/32/38_2.png) [@froschdesign](https://discourse.laminas.dev/u/froschdesign)\
**Post date:** [April 21, 2023, 10:19am UTC](https://discourse.laminas.dev/t/how-to-display-form-error-in-bootstrap-style-gracefully/3311/3 "2023-04-21T10:19:18Z")

</div>

> [@jobsfan](#):
>
> Is there other ways to add custom class to a form?

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

> **[formElementErrors - laminas-form - Laminas Docs](https://docs.laminas.dev/laminas-form/v3/helper/form-element-errors/#usage-in-a-laminas-mvc-application)**
>
> Validate and display simple and complex forms, casting forms to business objects and vice versa.

> **[Validation](https://getbootstrap.com/docs/5.2/forms/validation/#server-side)**
>
> Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

This should produce the desired result.

---

<div class="post-metadata">

**Author:** ![jobsfan](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.laminas.dev/jobsfan/32/399_2.png) [@jobsfan](https://discourse.laminas.dev/u/jobsfan)\
**Post date:** [April 22, 2023, 2:04am UTC](https://discourse.laminas.dev/t/how-to-display-form-error-in-bootstrap-style-gracefully/3311/4 "2023-04-22T02:04:35Z")

</div>

Thank you!

First the $from problem resolved by following your advise.

 ![11111](https://canada1.discourse-cdn.com/flex032/uploads/zendframework/original/2X/4/43e408bc8692467ff6858c21e9966897d55d32e0.jpeg)

I also tried the following.

```auto
/**
 * @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](https://canada1.discourse-cdn.com/flex032/uploads/zendframework/original/2X/8/818c71c009f43a79efdd958aafea50cc0ae081d6.jpeg)

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](https://canada1.discourse-cdn.com/flex032/uploads/zendframework/original/2X/5/5b93da32aad9c15fc857033339063bea585e6e7b.jpeg)

---

<div class="post-metadata">

**Author:** ![jobsfan](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.laminas.dev/jobsfan/32/399_2.png) [@jobsfan](https://discourse.laminas.dev/u/jobsfan)\
**Post date:** [April 22, 2023, 2:31am UTC](https://discourse.laminas.dev/t/how-to-display-form-error-in-bootstrap-style-gracefully/3311/5 "2023-04-22T02:31:39Z")

</div>

> **[formElementErrors - laminas-form - Laminas Docs](https://docs.laminas.dev/laminas-form/v3/helper/form-element-errors/#usage-in-a-laminas-mvc-application)**
>
> Validate and display simple and complex forms, casting forms to business objects and vice versa.

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

```auto
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](https://canada1.discourse-cdn.com/flex032/uploads/zendframework/original/2X/6/61576a1dd6b02ff28fd9576d8ea3fe793cbe0bd2.jpeg)

It can not act as I wished.

 ![222](https://canada1.discourse-cdn.com/flex032/uploads/zendframework/original/2X/4/4fc9f95987b403b03683ee8c05f57b2f2033cb6a.png)

> <https://stackoverflow.com/questions/65919170/lamians-zf3-adding-css-class-to-invalid-form-fields>

 ![5555](https://canada1.discourse-cdn.com/flex032/uploads/zendframework/original/2X/0/0522dca27bdbba7d4284858b8b9c233d11442d41.jpeg)

---

<div class="post-metadata">

**Author:** ![froschdesign](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.laminas.dev/froschdesign/32/38_2.png) [@froschdesign](https://discourse.laminas.dev/u/froschdesign)\
**Post date:** [April 22, 2023, 5:10am UTC](https://discourse.laminas.dev/t/how-to-display-form-error-in-bootstrap-style-gracefully/3311/6 "2023-04-22T05:10:29Z")

</div>

> [@jobsfan](#):
>
> In fact, I already configurated in global.php like this:

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

---

<div class="post-metadata">

**Author:** ![jobsfan](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.laminas.dev/jobsfan/32/399_2.png) [@jobsfan](https://discourse.laminas.dev/u/jobsfan)\
**Post date:** [April 22, 2023, 7:56am UTC](https://discourse.laminas.dev/t/how-to-display-form-error-in-bootstrap-style-gracefully/3311/7 "2023-04-22T07:56:20Z")

</div>

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](https://stackoverflow.com/questions/65919170/lamians-zf3-adding-css-class-to-invalid-form-fields) solution1, it can reach my goal. But I think it is not simple enough, I guess there is other better way.

---

<div class="post-metadata">

**Author:** ![froschdesign](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.laminas.dev/froschdesign/32/38_2.png) [@froschdesign](https://discourse.laminas.dev/u/froschdesign)\
**Post date:** [April 24, 2023, 7:23am UTC](https://discourse.laminas.dev/t/how-to-display-form-error-in-bootstrap-style-gracefully/3311/8 "2023-04-24T07:23:29Z")

</div>

> [@jobsfan](#):
>
> In the laminas document, **inline-block** class advised

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

> [@jobsfan](#):
>
> … **invalid-feedback** , I tried these two classes, but I can not use two class in the form\_element\_errrors configuration.

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