質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.22%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 3,612

zummy

score 14

前提・実現したいこと

CakePHP2で申込みフォームを作っています。
jQuery-Validation-Engineを利用してバリデーションを行い、
同一グループのチェックボックスを2つ以上選択した場合にエラーを発生させたいのです。

質問したいこと

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="カテゴリ1"   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]]">
            カテゴリ1
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" name="test" data-men="1" data-category-name="カテゴリ2"   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]]">
            カテゴリ2
          </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)
以上のローカル環境で検証しています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

ソースコードの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', {設定});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/11 15:50 編集

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

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

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

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

    キャンセル

  • 2017/09/11 22:12 編集

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

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

    キャンセル

  • 2017/09/12 08:41

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る