フロントエンドでバリデーションチェックを行えるjQuery Validation
セレクトボックスに絞り込み検索を追加できるChoices.js
後者のほうはselect2も有名ですが、どちらも便利で使っているのですが、
Choicesで作ったセレクトボックスではjQuery Validationが働かなったので、やや強引に解決しました。
によると、select2なら解決出来るようなことが書いてあったので、
使うプラグインを変更できるようでしたら、そうしたほうが早いかもしれないです。
解決方法
jQuery Validationのignoreを使用
ignoreというオプションで、エラーチェックを無視する対象を選べて、
デフォルト値は:hiddenになっており、
これにより、非表示状態の入力項目はエラーチェックしなくなっています。
Choicesはセレクトボックスを加工すると元々のセレクトボックスをdisplay: noneで隠してしまうので、
このルールを書き換えます。
// Choicesの対象セレクトボックス
new Choices('#select');
// jQuery Validationの設定
$('#form').validate({
ignore: ':hidden:not(#select)', // ここにChoicesの対象を記載
rules: {
'select': {
required: true
}
},
messages: {
'select': {
required: '入力してね'
}
}
});
上記の記述でチェックを無視する対象が「#select以外のhidden」という設定に変わるので、
Choicesで作られたセレクトボックスもチェックされるようになります。
入力切り替え時のエラーチェック処理
エラーはチェックしてくれてもセレクトボックスの選択を切り替えてもリアルタイムでバリデーション表示が切り替わりません。
それを解決するにはセレクトボックス側のchangeイベントで対応します。
上記のソースを以下のようにします。
// 操作するので変数にする
const selectBox = new Choices('#select');
$('#form').validate({
...(バリデーションは特に変更なし)...
});
// selectBoxを切り替えたときの処理
$(selectBox.passedElement.element).on('change', async function () {
// セレクトボックスのバリデーションを呼び出す
$('#select').valid();
});
おまけ
ググっても出てこなかったのでドキュメント見ながら対応していたのですが、
ChatGPTに聞いてみたら、
断片的ながら
- Choicesのカスタムイベントを使う
- jQuery Validationのignoreオプションを使う
というような回答が得られたので、かなりのヒントが出てました。
※最初から使えばよかった。
ネットで検索する時代ももう少しで終わるのかもと思った次第です。