入力画面から次の画面(確認画面)へ進む際に、特定のフィールドが入力されていないとき、必須項目に対するエラーではなく、ポップアップ等によるエラーを表示し、次に進めないようにすることは可能でしょうか。
お世話になっております。
トヨクモの友利と申します。
ポップアップでエラーを表示する際、JavaScriptのalertを使用するのが良いと思います。
以下のコードでポップアップを表示することができます。
(function () {
'use strict';
let check = false
fb.events.form.created.push(function (state) {
//ここの0はブラウザの開発者ツール上のコンソールででfieldsと打った時のフィールドのインデックスです
state.fields[0].validations.push({
params: [],
rule: 'popup'
});
return state;
});
fb.addValidators = function (state) {
return {
popup: {
getMessage: function (fieldCode, params) {
if (!check) {
alert('メッセージ')
check = true
} else {
check = false
}
return 'メッセージ';
},
validate: function (value, params) {
return Boolean(value.trim().length);
}
}
};
};
})();
友利優希様
お世話にになります。
アドバイスいただき、ありがとうございます。
fieldCodeの箇所を該当のフィールドコードに変更し試してみたところ、次に進めなくなっているのですが、
ポップアップが表示されませんでした。
javascript初心者で申し訳ありませんが、再度アドバイスいただけないでしょうか。
申し訳ありません。
(function () {
'use strict';
const code = 'string' //フィールドコード
fb.events.fields[code].changed.push(function (state) {
if (state.record[code].value.trim().length === 0) alert("メッセージ")
});
})();
こちらのコードではどうでしょうか？
友利優希様
お世話になります。
ありがとうございます。
試してみましたが、アラートは表示されませんでした。
また、入力画面から次の画面(確認画面)へ進む際に、このアラートを表示させたいので、イベントをfb.events.form.confirmに変更して
試してみましたが、それでもアラートは表示されませんでした。
度々申し訳ありませんが、アドバイスいただけないでしょうか。
友利優希様
お世話になります。
いろいろ試した結果、jQueryを組み合わせることで、アラートを表示させることに成功しました。
ただ、アラートは表示するのですが、アラート内のOKボタンをクリックすると、次の確認画面に進んでしまいます。
アラート等のポップアップを表示させて、且つ次の確認画面に進めないようにしたいのですが、何かやり方がありますでしょうか。
fb.events.form.confirm内の関数は確認画面へ移動する際のeventであるため
この中で関数を発火させても確認画面には進んでしまうように出来ています。
私の環境では上記のJavaScriptでアラートが表示できているので
再現するためにもう少し詳しく環境をお伺いしてもよろしいでしょうか？
（どういうタイプのフィールドを使用してるかのなど）
お世話になります。
ひとまずやり方を変えて問題は解決しましたので、大丈夫そうです。
親切にご対応いただき、ありがとうございました。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。