フォームブリッジにてJavaScriptカスタマイズが動作しない

いつもお世話になっております。

下記のようなフォームブリッジの画面項目が特定のステータス時に、添付ファイル項目を必須にするJavaScriptカスタマイズを使用しています。

ブラウザがGoogle ChromeやMicrosoft Edgeだと正常に動作するのですが、Internet Explorer だと動作せず、必須項目となりません。

どうしてもInternet Explorerを使用してしまうお客様が一定数いるため、原因等何かわかりましたらご教授頂ければ幸いです。

(function() {
"use strict";

fb.events.form.mounted.push(function (state) {

var sts = state.record.{fieldCode_A}.value;

if(sts == 'A' || sts == 'B'){

state.fields.find(({code}) => code === "{添付ファイルフィールドコード名}").validations.push({
rule: 'required'
});
}

return state;

});

})();

S.Yuzawaさん

こんにちは

 

IE11ではアロー関数は対応していないようです。

動作確認までできておりませんが、以下のように書き換えるといかがでしょう。

state.fields.find(function (code) {
return code === "{添付ファイルフィールドコード名}";
}).validations.push({
rule: 'required'
});

S.Yuzawaさん

お世話になっております。

横から失礼いたします。

findはES6からの機能になるので、IEでは利用できないかもしれません。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find#browser_compatibility

koichiさんの仰る通り、アロー関数の使用をやめるのと合わせて、findの代わりにfilterを使用すると良いかと思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

state.fields.filter(function (code) {
  return code === "{添付ファイルフィールドコード名}";
})[0].validations.push({
  rule: 'required'
});

 

また、Babelなどのトランスパイラを用いれば、IEで利用できるコードに自動で変換することもできます。
https://babeljs.io/
https://qiita.com/mzmz__02/items/e6fbe5e30cc3fd13788f

koichさん

頂いたソースを少しだけ改良し、以下で動作確認ができました。
情報提供ありがとうございました。非常に助かりました。

state.fields.find(function (field) {
return field.code === "{添付ファイルフィールドコード名}";
}).validations.push({
rule: 'required'
});

江田篤史さん

情報提供ありがとうございました。合わせて参考にさせて頂きます。

江田篤史さん

補足ありがとうございます。findも未対応でしたね。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。