Additional span with error class for ActiveField ¶
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 your
input.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** this
with 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.