jQuery Validation Pluginでチェックボックスを必須にしたいのに、ちゃんと判定してくれないな〜という問題があったので、解決策を残しておきます。
私のケースは、悩んだわりにめちゃくちゃ単純な解決方法でした。
ここではinput[name="agreement"]のチェックボックスを必須にしたいので、バリデーションのJSはこんな記述にしました。
規約の同意のチェックをしないと次に進めないようにしたい、ってやつです。
var $form = $('#inquiry-form');
$form.validate({
rules: {
agreement:{
required: true,
},
}
});原因
input[type="checkbox"]のスタイルがdisplay: none;になっていたせいでした。CSSでチェックボックスに独自のスタイルを当てていて、ネイティブ(?)のチェックボックスを非表示にしてました。
フォームの要素が非表示になっているとバリデーションが走らないようです。そりゃそうですね…。
解決策
要素をdisplay: none;で消さずに、CSSで表示を調整しましょう。
input[type="checkbox"]{
width: 0;
height: 0;
visibility: hidden;
}原因に気づいてしまうとめちゃくちゃ簡単でした。