【フォームブリッジ】カタカナのみの入力制御

kintone の構築／設計／運用
1

こちらの投稿をもとにフィールドコード「フリガナ」には全角カタカナのみを入力できるようにしたいです。以下の通りフィールドコード部分のみを修正して、フォームブリッジに適用していますが、ひらがな、英字でも送信ができてしまいます。２０２２年の投稿なので現在は適用されない仕様なのでしょうか？

有識者の方、ご教示いただければと思います。

(function() {
    'use strict';

    fb.addValidators = function(state) {
        return {
            katakana_validation: {
                getMessage: function(fieldCode, params) {
                    return '全角カタカナで入力してください。';
                },
                validate: function(value, params) {
                    value = (value == null) ? "" : value;
                    // 空欄OK、全角カタカナと長音符のみ許可
                    return value === "" || /^[ァ-ヶー]+$/.test(value);
                }
            }
        };
    };

    fb.events.form.created = [function(state) {
        // 「フリガナ」フィールドのみ対象
        state.fields.filter(field => field.code === 'フリガナ')
            .forEach(field => {
                field.validations.push({
                    params: [],
                    rule: 'katakana_validation'
                });
            });
        return state;
    }];
})();
2

最近 FromBridge のバージョンが上がり、カスタマイズの仕様も変更になったので、新しいバージョンのフォームに対応したカスタマイズが必要になります。カスタマイズの詳細は以下にまとまっています。

最近 FormBridge を触っていないので、設定画面から新旧どちらのバージョンのフォームか判断つくのかわかりませんが、旧バージョンのコードが動いていないことを見るに恐らく新バージョンのフォームになっているんじゃないかと思います。

ご参考までに。

「いいね！」 2
3

ありがとうございます。
フォームのバージョンによってjavascriptも違っているとは把握していませんでした。

新バージョンのフォームでの実装で動いておりませんので、従来バージョンのフォームだと動くかもしれませんね。
コードを1から書くスキルがないのでしばらく寝かせます・・・

もしお分かりの方がいらっしゃればコード含めて対応策をご教示いただけると幸いです。

4

前提

  • フォームは新しいバージョン
  • チェック対象フィールドコードは フリガナ
(() => {
	formBridge.events.on("form.field.change.フリガナ", (context) => {
		const value = context.value == null ? "" : context.value;

		if (value === "" || /^[ァ-ヶー]+$/.test(value)) {
			// OKなのでエラーを消す
			context.setFieldValueError("フリガナ", null);
		} else {
			// NGなのでエラー表示
			context.setFieldValueError(
				"フリガナ",
				"全角カタカナで入力してください。",
			);
		}
	});
})();

考えたこと1

古いコードと
JavaScriptカスタマイズ | FormBridge

を生成AIに渡してバージョンアップしてと依頼
結果はエラーが出た。fbなんとかに引きづられていた。

考えたこと2

ヘルプページをみて
「また入力された値を検査してエラーメッセージを表示することもできます。」

formBridge.events.on('form.field.change.company_name', function (context) {
  const companyName = context.value;
  const personalName = formBridge.fn.getRecord().personal_name.value;
 
  if (companyName !== '' && personalName !== '') {
    context.setFieldValueError('company_name', '法人名と個人名の両方を入力することはできません。');
    context.setFieldValueError('personal_name', '法人名と個人名の両方を入力することはできません。');
  } else {
    // エラーメッセージをクリア
    context.setFieldValueError('company_name', null);
    context.setFieldValueError('personal_name', null);
  }
});

を発見、古いコードを新しいコードのように修正してと依頼
相変わらず古いコードに引きずられているがほしい部分を出力された。

5

は未だに拒否しているみたいです。

# www.robotstxt.org/
# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449

User-agent: facebookexternalhit
Disallow:

User-agent: LinkedInBot
Disallow:

User-agent: Twitterbot
Disallow:

User-agent: *
Disallow: /
6

ありがとうございます！
思っている動作ができました。

image
image388×179 5.54 KB

自分も生成AIへコンソールエラーや新バージョンのルール含めて依頼してみたのですがうまくいかずでした。
助かりました。

「いいね！」 1
7

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