フィールドの値が取得できない

[Legacy_Account2046 (kuma（Legacy Account）)]

お世話になっております。フォームブリッジで下記ページを参考にJSを書いています。

https://form.kintoneapp.com/help/customize

やりたいこととして、あるフィールドの値が特定の値の時、エラーを表示して確認画面に進めないようにするという処理を書きたいと思っています。

そこで、fb.getElementByCode(XXX)を使ってフィールドの値を取得しようとしています。コードは下記の通りです。

(function () {
“use strict”;

fb.events.form.submit = [
function (state) {
console.log(state);
let hako = fb.getElementByCode(doui);
//fb.getElementByCode(doui);
if (hako === “特定の回答”) {
window.alert(
“えらーめっせーじ”
);
}
return state; // 変更後の状態を返さない場合、一部の変更が反映されない場合があります
},
];
})();

すると以下のようなエラーが表示されます。

vue.runtime.esm.js:1888 ReferenceError: doui is not defined
at fb.events.form.submit (同意エラーver1.js:7)
at Object.callEvents (user-state.js:13)
at w.callEvents (form.js:172)
at vuex.esm.js:725
at vuex.esm.js:391
at Array.forEach (<anonymous>)
at vuex.esm.js:390
at w._withCommit (vuex.esm.js:521)
at w.commit (vuex.esm.js:389)
at w.commit (vuex.esm.js:334)

 

というエラーが出てしまいます。どうしたら変数にフィールドの値が格納できるかご教授いただけますと幸いです。

よろしくお願いいたします。

[Legacy_Account1286 (Ishikawa Mizuki（Legacy Account）)]

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

トヨクモの石川と申します．

 

ご提示頂いたプログラムの場合，「確認画面へ遷移するとき」ではなく「完了画面に遷移するとき」に発火することとなります．

また，「fb.getElementByCode」という関数はDOMを取得する関数となりますので，今回の目的では利用することが出来ません．

例えば，「sample」というフィールドコードを持つ文字列1行フィールドが「特定の回答」という値を持つときに確認画面へ遷移するタイミングでアラートを表示する，

というプログラムを書くと，以下のようになります．

この方法では，fb.events.form.confirmイベントを利用し，stateからフィールド値を取得して判定を行っています．

(function() {
"use strict";

fb.events.form.confirm = [function (state) {
const target = state.record['sample'].value;
if (target === '特定の内容') {
window.alert('エラー');
}
return state;
}];
})();

しかし，この方法だとアラート後にOkを押すことで確認画面へ進んでしまいますので，更に調整を加える必要があります．

 

エラーメッセージを表示したいというシステムの実装方法に関してですが，

> あるフィールドの値が特定の値の時、エラーを表示して確認画面に進めないようにするという処理を書きたい

この場合，対象のフィールドの値を取得し，独自にアラート（window.alertなど）を実装するのではなく，

FormBridgeに搭載しているカスタムバリデート機能を使うことで，複数のフィールドを組み合わせたエラーメッセージや，

確認画面に進ませないといった処理などを容易に実装することが出来ます．

（動作としては，必須項目に設定したフィールドを空白にした場合とほぼ同じになります）

尚，カスタムバリデートの利用方法についてはFormBridgeのカスタマイズページにて使用例が掲載されていますので，

そちらをご参考にして頂ければと思います．

 

具体例として，本件にカスタムバリデートを設定する例を挙げさせていただきます．

「特定の内容」のとき，「任意のメッセージ」が表示されます．

(function () {
'use strict';

fb.events.form.created.push(function (state) {
state.fields.find(field => field.code === 'sample').validations.push({ // 対象フィールドのフィールドコード
params: [],
rule: 'custom_validation'
});
return state;
});

fb.addValidators = function (state) {
return {
custom_validation: {
getMessage: function (fieldCode, params) {
return '任意のメッセージ';
},
validate: function (value, params) {
return value !== '特定の内容';
}
}
};
};
})();

ご不明点等ございましたらコメントにてお願いします．