jQuery-Validation-Engine と BootstrapToggleを併用できない

Question

###前提・実現したいこと
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)
以上のローカル環境で検証しています。

Answer 1

ソースコードのlast.validationEngine("validate");の部分ですが、これは、たぶんバリデーション結果チェックをしているんだと思うのですが、jquery.validation.engine()だとバリデーションチェックのみはできません。

通常バリデーションエラー時に何かしたい場合は、下記のようにします。

// すべてのフォームで同じ動作にする場合
$('#block31AddForm').validationEngine('attach', {
  focusFirstField: false, 
  promptPosition: "topRight", 
  scroll: false,
  onSuccess : function (form, status) {
    // バリデーション成功時の動作
  },
  onFailure : function (form, status) {
    // バリデーションエラー時の動作
  },
  onValidationComplete : function (form, status) {
    // バリデーション完了時の動作（成功、失敗関係なく）;
  }
});

// 個々のフォームで違う動作にする場合
$(個々のフォーム).validationEngine('attach', {
  focusFirstField: false, 
  promptPosition: "topRight", 
  scroll: false,
  onSuccess : function (form, status) {
    // バリデーション成功時の動作
  },
  onFailure : function (form, status) {
    // バリデーションエラー時の動作
  },
  onValidationComplete : function (form, status) {
    // バリデーション完了時の動作（成功、失敗関係なく）;
  }
});

validateメソッドは、手動でバリエーションを行いたい場合に使用します。
この場合、前にattachを行っていると2重起動になりますので、予期せぬ動作になります。

var バリデーション結果（true|false） = $(form).validationEngine('validate', {設定});

Comments

[zummy]

お返事が大変遅くなりました。
申し訳ありません。

> $(form).validationEngine('attach', {設定});
こちらが初期処理（？）、
> $(form).validationEngine('validate', {設定});
こちらが任意のタイミングで実行されるバリデート処理を呼び出しているものだと
勝手に解釈していました・・。

２重起動となる、とのことなので片方をコメントアウトし、
「次 へ →」ボタンクリック時にのみ
$(form).validationEngine('validate', {設定});
・・・を実行するようにしてみましたが、
結果は変わりませんでした。

補足
説明不足でしたが、１ページが４つのフォーム（block1, block2,・・・ block4）から構成されており、
block1の「次 へ →」ボタンをクリック時にバリデーションを行い、
エラーが無ければblock1を非表示、block2を表示しています。
（block2以降も同様です）

[Tomak]

BootstrapToggle自体の問題だと思います。checkboxのchangeイベントが拾えないというバグレポートがあるので、jquery.validation.engine()に伝播する前の問題だと思います。
https://github.com/minhur/bootstrap-toggle/issues

代替案としてBootstrapスイッチというのに切り替えてみてはいかがでしょうか。
http://bootstrapswitch.com/

[zummy]

ホントですね！
なるほど、HitHubのissuesを見てみる、というのも大事ですね。
ありがとうございます。

ご提案いただいたBootstrapスイッチ、導入を検討してみます。
迅速な回答、ありがとうございました。
(こちらのレスポンスが遅くて申し訳ありませんでした)