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;
}
原因に気づいてしまうとめちゃくちゃ簡単でした。