Vuetifyのv-checkboxで最低一つ選択必須にするバリデーションの実装

公開:2021/02/14
更新:2021/02/14
1 min読了の目安(約1000字TECH技術記事

はじめに

Vuetify でフォームを作ったときに v-checkbox を使いました。
チェックボックスを最低 1 つ選択必須にするバリデーションを掛けようとしたときに苦戦しましたので、バリデーションの方法について書きます。

個人的にいまいちだった方法

stack overflow のHow to validate checkbox group with Vuetifyにあった回答を参考にして、バリデーションを作りました。

チェックボックスを1つも選択していないときに、エラーメッセージが全てのチェックボックスに表示されてしまいます。
見た目がいまいち…!エラーメッセージは1つだけにしたい…!

バリデーション実装その1

v-checkboxhide-detailsを最後のチェックボックスのみfalse(他はtrue)にしています。
最後のチェックボックスかどうかの判断はisLastFruitメソッドでしています。

この方法はシンプルですが、最後のチェックボックスがdisabledになっている場合に、エラーメッセージの色が赤にならないのが微妙なポイントでした。(disabledを使わない場合は、この方法が良さそうです。)

バリデーション実装その2

v-checkboxhide-detailstrueにして、チェックボックスのエラーメッセージを非表示にしています。
選択したチェックボックスの値を入れているselectedValuesが空のとき、v-showで条件分岐してエラーメッセージが表示されるようにしています。