jQuery-Validation-Engine と BootstrapToggleを併用できない
解決済
回答 1
投稿
- 評価
- クリップ 1
- VIEW 3,612
前提・実現したいこと
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
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', {設定});
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.22%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
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 編集
https://github.com/minhur/bootstrap-toggle/issues
代替案としてBootstrapスイッチというのに切り替えてみてはいかがでしょうか。
http://bootstrapswitch.com/
2017/09/12 08:41
なるほど、HitHubのissuesを見てみる、というのも大事ですね。
ありがとうございます。
ご提案いただいたBootstrapスイッチ、導入を検討してみます。
迅速な回答、ありがとうございました。
(こちらのレスポンスが遅くて申し訳ありませんでした)