Laravelで、jQueryプラグインのselect2を使っていると、バリデーションエラー時に、フォームの赤枠が表示されない

前提・実現したいこと

セレクトボックスに、jQueryプラグインのselect2を使用しています。
バリデーションエラー時に、フォームを赤枠で囲うように、bootstrapのクラスを記述したのですが、
select2のclassが優先されるようで、反映されません。
どなたか解決方法ご存知でしたら、ご教示いただきたいです。

該当のソースコード

     <div class="form-group">
        <label for="js-multiple" style="display: block">募集対象地域</label>
          <select class="form-control @error(prefecture_id) is-invalid @enderror" id="js-multiple" name="prefecture_id[]" multiple="multiple">
            <option value="" style="display: none;">選択してください</option>
          </select>
        @error('prefecture_id')
          <span class="invalid-feedback"> // ここは表示されています
            <strong>{{ $message }}</strong>
          </span>
        @enderror
      </div>
    </div>

jQuery
1// セレクト2
2  $('#js-multiple').select2({
3    placeholder: "都道府県を選択",
4    width: "resolve"
5  });

試したこと

こちらの記事を参考に、
selectの親要素に @error has-error @enderrorを付けてみましたが、@errorは引数に名前が必要なので
エラーになりました。@error('prefecture_id') has-error @enderrorとした場合は、
変わらず、赤枠が表示されませんでした。

補足情報（FW/ツールのバージョンなど）

laravel: 7.19.1
jQuery: 3.3.1
select2: 4.0.6

行動規範の内容に同意します

回答1件

<label for="js-multiple" style="display: block">募集対象地域</label>
　　<select class="form-control @error(prefecture_id) is-invalid @enderror" id="js-multiple" name="prefecture_id[]" multiple="multiple">
    　　<option value="" style="display: none;">選択してください</option>
    </select>

↓

<label for="js-multiple" style="display: block">募集対象地域</label>
<div class="@error(prefecture_id) is-invalid @enderror">
　　<select class="form-control" id="js-multiple" name="prefecture_id[]" multiple="multiple">
    　　<option value="" style="display: none;">選択してください</option>
    </select>
</div>

selectのフォームはselect2の要素で隠れるので、
その記事にある通り別に要素を付ける方針でいいと思います。

重要なのはcssだと思います。

.is-invalid {
    .select2-container--focus .select2-selection,
    .select2-container--open .select2-selection {
        border-color: #e3342f;
        box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.25);
    }
    .select2-dropdown,
    .select2-selection {
        border-color: #e3342f;
    }

select2のクラスを指定して、あとはbootstrapの.is-invalidのスタイルを適用すればよろしいかと思います。
私もselect2とbootstrapを使用していますので、ご参考までにどうぞ。

投稿2020/09/03 11:24