jQuery Validation Pluginでチェックボックスのエラー文が出ない

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;
}

原因に気づいてしまうとめちゃくちゃ簡単でした。

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る