お世話になります。
トヨクモ様ご提供のコード（togglevalidate.js）を、フォーム全体に設定した条件下で条件分岐を設定し、分岐先に個別ののJavaScriptを設定した際の挙動に関する質問です。
こちらの方↓
https://developer.cybozu.io/hc/ja/community/posts/360050670512
がおっしゃる事と趣旨は同一と思われますが、分岐先の個別javaScript（数値欄の入力値を右寄せ）が効かなくなる動作が発生しております。個別コードが優先されない仕様であるとも見えますが、カスタマイズアップロードで並べる順番を変えることで優先順位が変わる場合もあるようでして、これが仕様であるかバグであるか微妙な感もしております。このような場合の何らかの回避方法がありましたらご教授ください。
よろしくお願いいたします。
お世話になっております。
トヨクモの友利と申します。
こちらでtoggleValidate.jsを使用した条件分岐と分岐先フィールドの個別JavaScript(以前の数値の入力欄の右寄せ)を同時に試してみたところ
どちらも正常に動作したのですが、もし他のカスタマイズを追加している場合はそのカスタマイズのコードが影響している可能性があります。
参考として
fb.events.form.created = [function(state) {
/\* \*/
}]
という部分がある場合、これまでに読み込まれたカスタマイズが上書きされてしまいます。
この場合
fb.events.form.created.push(function(state) {
/\* \*/
})
とすることで上書きではなくカスタマイズを追加するという形にできます。
友利様
ご連絡ありがとうございました。
他には必須項目のプルダウン初期値を固定しないコード
(function () {
"use strict";
fb.events.form.created.push(function (state) {
state.record["d_3"].value = "";
state.record["d_1"].value = "";
//以下複数のプルダウンを同様に列挙
//...
return state;
});
})();
や郵便番号自動引き出しなどしておりますが、該当するものが見当たりませんで、togglevalidate.jsを外すとコードが効くという事象となっております。
最初にも記載させていただきましたが、分岐設定の先に存在する入力欄に対する右寄せコードのみ影響を受けております。
もう少し詳述させていただきますと、
１）右寄せコード以降に存在する、同様に右寄せにしている入力欄も右寄せが利きません。
２）影響を受けている部分を切り取り、別ファイル化しても利きません。
３）影響を受けている部分を別ファイル化することでその余の入力項目の影響が無くなります。
togglevalidate.jsの存在如何にかかわらず、優先順位などが決定される要素は他に存在しますでしょうか？
大変恐れ入りますがよろしくお願いいたします。
友利様
こちら原因が判明いたしました。
tooglevalidate.jsを適用し、上述のコードを当てがい、以下のような分岐設定をした場合に、この設定をした項のコードが利かなくなる模様です。
１）A、B、Cと選択肢のあるプルダウンを用意。①～④の能書きがある。①～③に個別コードを設定。
２）分岐設定を投入
A項を選ぶと①、②、③を表示
B項を選ぶと②を表示
C項を選ぶと④を表示
この場合、A項を選んだ時とB項を選んだ時で②をともに表示しておりますが、こういった重複がある場合に、②以降の個別コードが利かなくなる問題が発生いたします。
分岐選択先で重複選択項目があり、tooglevalidate.jsを利用すると設定が上書きされるということとなりましょうか？
よろしくお願いいたします
こちらで検証してみたところ
条件分岐を挟んだDOMの生成の遅延とカスタマイズJSの実行のタイミングの問題である可能性が高かったため
個別コードのカスタマイズをCSSでカスタマイズをすることにより数値の右よせ等が反映されました。
解決方法
個別でスタイルを変更しているJSを破棄する。
個別のスタイルの変更をcssで置き換える。
参考に下記のコードで数値の右寄せが出来ます。
[data-vv-name="num1"] > .el-input > input {
text-align: right;
padding-right: 50px!important;
}
[data-vv-name="num2"] > .el-input > input {
text-align: right;
padding-right: 50px!important;
}
[data-vv-name="num3"] > .el-input > input {
text-align: right;
padding-right: 50px!important;
}
[data-vv-name="num4"] > .el-input > input {
text-align: right;
padding-right: 50px!important;
}
この時num1~num4は数値のフィールドコードです
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。