[extension] mgrechanik/yii2-activefield-additional-error


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

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

, 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.