チェックに引っかかった場合、selectboxの枠線の色を変えて、フォーカスが外れたら元の色に戻したい

Question

前提・実現したいこと

jQueryで入力チェックを実装しているところです。
チェックに引っかかった場合、どの入力項目がNGだったか分かるように、項目のボーダー色を変えたいです。
※対象はselectboxになります。

発生している問題

色々試しましたが意図した通りになりません。

試したこと

元々CSSでfocusするとボーダー色を変えるようにしてたので、チェックに引っかかったタイミングで、選択状態にしてみました。

選択状態にはなりますが、色は変わりませんでした。

$("hoge").val(0);

そこで選択状態にするのはやめて、チェックに引っかかったら、色を変えてみました。

$(".hoge").css("box-shadow","0 0 10px 0 #ff9900");

一見うまくいったように思えたのですが、この後selectboxに枠色がずっと付いたままになってしまいます。
※当然といえばそうなのですが

フォーカスが外れた時に枠色を戻すscriptを追加したら解消するでしょうが、何だか違うような気がしてます。もっとシンプルな方法はないかと悩んでいます。

整理するとやりたいイメージは、以下の通りです。

枠色を変えたいのは
・（入力時に）フォーカスが当たった時
・チェック時に引っかかった時

枠色を元の色に戻したいのは
・フォーカスが外れた時

先輩方アドバイスいただけないでしょうか？
宜しくお願い致します。

コードペン
リンク内容

該当のソースコード

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<select class="minimal">
  <option>apple</option>
  <option>grape</option>
  <option>banana</option>
</select>

<button>登録</button>

select {
	/* styling */
	background-color: white;
	border: thin solid #ddd;
	border-radius: 4px;
	display: inline-block;
	font: inherit;
	line-height: 1.5em;
	padding: 0.5em 3.5em 0.5em 1em;
	width: 100%; /*親要素いっぱい広げる*/
	
}

/* arrows */
select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, green 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  box-shadow: 0 0 10px 0 rgba(255,153,0,1);
  outline: 0;
}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

$('button').click(function(){
  $(".minimal").css("box-shadow","0 0 10px 0 #ff9900");
})

Comments

[m.ts10806]

「フォーカス外れたら」のイベント捕捉はされてないようですが

[pecchan]

はい、それを追加せず出来ないかなと思ったのです・・・
理由はすでにイメージした動作がscssで実現できているからです。
イメージした動作とは、フォーカス時、フォーカス外れた時のことです。

具体的な方法は分からないですがjQueryからこれらを呼ぶ？連動できないかなと思ったのですが。

[yambejp]

チェックに引っかかったタイミング
が何かわからないので検証できません

[pecchan]

コードペンを記載してました。

Answer 1

チェックに引っかかった場合、どの入力項目がNGだったか分かるように、項目のボーダー色を変えたいです。
$(".minimal").css("box-shadow","0 0 10px 0 #ff9900");

要素の状況によって見た目を変えたいときは、クラスの付け外しで対応するのが定石です。

チェックに引っかかったとき：

$(".minimal").addClass("oneshot-invalid");

blurイベント時:

$(".minimal").removeClass("oneshot-invalid");
// oneshot-invalidが付いてないときは何も起きないので、
// 無条件でこれを実行して構わない。

スタイル:

.oneshot-invalid {
  box-shadow: 0 0 10px 0 #ff9900;
}

Comments

[pecchan]

>要素の状況によって見た目を変えたいときは、クラスの付け外しで対応するのが定石です。

素人一人なのでこういった「定石」は、本当に助かります！！
有難う御座います！！！