LaravelでSelect2とBootstrap4を使って、バリデーションエラー時に赤枠で囲む
やりたいこと
Laravelでバリデーションエラー時に赤枠で囲んでエラーであることを示したい
やり方
セットアップ
まずはSelect2インストール
CDN使うならとばします
npm i select2
select2を適用する
適当にbladeにselect作って適当なクラスを作りました
hoge.blade.php
<select name="hoge" class="js-attachSelect2">
<option value=1>テスト1</option>
<option value=2>テスト2</option>
<option value=3>テスト3</option>
</select>
resources/js/assets/app.jsと同階層に適当なjsファイル作成してapp.jsで読み込みます
app.js
import './bootstrap';
import './select2Test';
select2の適用
select2Test.js
import select2 from "select2";
$(function(){
$('.js-attachSelect2').select2();
})
ここで、ようやくバリデーションエラー時の対応を書いていきます
普通ならこれで、bootstrapの赤枠が表示されますが
一瞬表示されて、select2が適用され見えなくなります
hoge.blade.php
<select name="hoge"
class="js-attachSelect2 @error('hoge') is-invalid @enderror">
<option value=1>テスト1</option>
<option value=2>テスト2</option>
<option value=3>テスト3</option>
</select>
selectの一つ親要素にエラー表示のクラスをつけるとうまく表示されます
bootstrap4だとis-invalid
hoge.blade.php
<div class="@error('hoge') is-invalid @enderror">
<select name="hoge" class="js-attachSelect2">
<option value=1>テスト1</option>
<option value=2>テスト2</option>
<option value=3>テスト3</option>
</select>
</div>
これで赤枠が表示されます。
select2側でデフォルトで色が定義されてるのですが、bootstrapより濃いので修正します
app.scss
.is-invalid {
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
border-color: #ff0906;
}
.select2-dropdown,
.select2-selection {
border-color: #ff0906;
}
}
でbootstrapっぽい色になった。
Author And Source
この問題について(LaravelでSelect2とBootstrap4を使って、バリデーションエラー時に赤枠で囲む), 我々は、より多くの情報をここで見つけました https://qiita.com/ntm718/items/d4ce86018581a1c5892a著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .