###前提・実現したいこと
CakePHP2で申込みフォームを作っています。
jQuery-Validation-Engineを利用してバリデーションを行い、
同一グループのチェックボックスを２つ以上選択した場合にエラーを発生させたいのです。
###質問したいこと
BootstrapToggleを使ったチェックボックスのバリデーションが動作せずに困っております。
どのようにコードを修正すれば動作するようになるのか、ご教授いただきたいと存じます。
※jQuery-Validation-EngineとBootstrapToggleが
衝突(・・という表現で合っているのか分かりませんが)しているのではないか？と予想しているのですが
アプローチが分からず、手を出せずにいます。
###発生している問題・エラーメッセージ
ブラウザの開発ツールを確認してもエラーメッセージらしきものは確認できませんでした。
###該当のソースコード (抜粋)
<div id="slideArea"> <?php echo $this->Form->create('block31'); ?> <div class="checkbox"> <label> <input type="checkbox" name="test" data-men="1" data-category-name="カテゴリ１" data-category-adult="10" data-category-junior="19" data-cnt=1 data-onstyle="danger" data-toggle="toggle" data-on="<i class='fa fa-circle-o' aria-hidden='true'></i>" data-off="<i class='fa fa-times' aria-hidden='true'></i>" class="validate[maxCheckbox[1]]"> カテゴリ１ </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="test" data-men="1" data-category-name="カテゴリ２" data-category-adult="10" data-category-junior="19" data-cnt=1 data-onstyle="danger" data-toggle="toggle" data-on="<i class='fa fa-circle-o' aria-hidden='true'></i>" data-off="<i class='fa fa-times' aria-hidden='true'></i>" class="validate[maxCheckbox[1]]"> カテゴリ２ </label> <?php echo $this->Form->button(__("次 へ →"), array("type" => "button", "class" => "btn-lg btn-primary pull-right next")); echo $this->Form->end(); ?> </div>
$(function(){ $("#block31AddForm").validationEngine("attach", {focusFirstField: false, promptPosition: "topRight", scroll: false); //「次へ」ボタンクリック時のバリデーション $('.next').on('click', function() { last = $("#slideArea").children().last().find("Form"); ret = last.validationEngine("validate"); if (!ret){return;} // 以下、やむなくサーバーサイドのバリデーションでエラーを発生させている });
###試したこと
-
それ以外のテキストボックス等のフォーム内要素において、正常にjQuery-Validation-Engineが動作することを確認しました。
-
対象となるチェックボックスはバリデーションが動作しませんが、BootstrapToggleは正常に動作することを確認しました。
-
対象となるチェックボックスからBootstrapToggleを外す(data-toggle属性を削除する)と、バリデーションが正常に行われることを確認しました。
-
jQuery-Validation-EngineとBootstrapToggleのJSファイルをロードする順序を入れ替えてみました、が解決しませんでした。
(jQuery, BootStrap, BootstrapToggle, jQuery-Validation-Engineの順に
ロードしています)
- 現在はjQuery-Validation-Engine でエラーを発生させられないので、やむなくサーバーサイドでエラーを発生させて実現しています。
###補足情報(言語/FW/ツール等のバージョンなど)
macOS Sierra 10.12.5(16F73)
PHP 5.6.30
CakePHP2.9.9
jQuery 2.2.4 （CDN)
BootStrap 3.3.7 (CDN)
BootstrapToggle 2.2.2 (CDN)
以上のローカル環境で検証しています。
まだ回答がついていません
会員登録して回答してみよう
