Bootstrap 4 になってフォーム周りの .has-error とかがなくなって、かつ .help-block が .invalid-feedback とかになったわけで、Yii 2 の ActvieForm 周りも修正していかないといけないわけで、そのへんの話しを。
環境
Yii 2.0.14
Bootstrap 4.0.0
ActiveForm 周りの修正
何も修正しないと、バリデーションエラー時に以下のような HTML になる:
<div class="form-group field-foo-bar required has-error">
<label class="control-label" for="foo-bar">Bar</label>
<input type="text" id="foo-bar" class="form-control" name="Foo[bar]" aria-required="true" aria-invalid="true">
<div class="help-block">error message...</div>
</div>
これは Bootstrap 3 に合わせたもの。Bootstrap 4 では使えない。どうするか？
Yii 2.0.14 で修正が入って、いい感じにできるようになっている。それが以下:
<?php $form = ActiveForm::begin([
'validationStateOn' => ActiveForm::VALIDATION_STATE_ON_INPUT,
'errorCssClass' => 'is-invalid',
'successCssClass' => 'is-valid',
'fieldConfig' => ['errorOptions' => ['class' => 'invalid-feedback']],
]) ?>
Html は以下のようになる:
<div class="form-group field-foo-bar required">
<label class="control-label" for="foo-bar">URL</label>
<input type="text" id="foo-bar" class="form-control is-invalid" name="Foo[bar]" aria-required="true" aria-invalid="true">
<div class="invalid-feedback">error message...</div>
</div>
エラーの状態を示す css class をどこに追加するかを validationStateOn プロパティで指定できる。これでフォームのボーダーとエラーメッセージが赤色になる。ちなみにラベルは赤くならなくなるけど、まぁいいでしょう...。
他のフォームでも使えるように設定ファイルに値を書いておこう:
config/web.php
$config = [
// ...
'container' => [
'definitions' => [
// ...
yii\widgets\ActiveForm::class => [
'validationStateOn' => yii\widgets\ActiveForm::VALIDATION_STATE_ON_INPUT,
'errorCssClass' => 'is-invalid',
'successCssClass' => 'is-valid',
],
yii\widgets\ActiveField::class => [
'errorOptions' => ['class' => 'invalid-feedback'],
],
],
],
];