Additional span with error class for ActiveField ¶

1. What is it about?
2. Installing
3. How to use

What is it about? ¶

Bootstrap 4 and 5 are expecting `html` like this to decorate validation error:

<input type="text" id="eventform-datetime" class="form-control is-invalid" name="EventForm[datetime]" aria-required="true">
<div class="invalid-feedback">Error message</div>

Element with `div.invalid-feedbackis supposed to be on the same level with yourinput.is-invalid`.

But sometimes when we are using any widgets or custom template we get html like this:

<div class="some-plugin-wrapper">
  <input type="text" id="eventform-datetime" class="form-control is-invalid" name="EventForm[datetime]" aria-required="true">
</div>  
<div class="invalid-feedback">Error message</div>

, so our error message is not shown.

Of cource you can make `div.invalid-feedback` visible by css for this page.

But if that does not suit you, this library propose another solution.

We are adding special `to a field template right before{error}part. And we **synchronize** thiswith the **input field** so it gets.is-invalid` class when input does

Installing ¶

Installing through composer:: ¶

The preferred way to install this library is through composer.

Either run composer require --prefer-dist mgrechanik/yii2-activefield-additional-error

or add "mgrechanik/yii2-activefield-additional-error " : "~1.0.0" to the require section of your composer.json.

How to use ¶

in your `viewfile, say it is_form.php`

use mgrechanik\additionalerror\AdditionalErrorBehavior;

<div class="event-form-form">

    <?php $form = ActiveForm::begin([
            'id' => 'event-create-form',
            // Adding behavior
            'as adderror' => [
                'class' => AdditionalErrorBehavior::class,
            ]
    ]); ?>

    <?= $form->field($model, 'datetime', [
            // Adding this hidden span before error block 
            'template' => "{label}\n{input}\n{hint}\n" . $form->getAdditionalErrorSpan($model, 'datetime') . "\n{error}"
    ])->hint('Some hint')
      ->widget(/* Some complicated widget creates a wrapper for the {input} part... */)

It will work for both server and client side.