フォームブリッジでのフィールド入力値制御(formbridge×JavaScript)

ゆーしゃん
2022.09.18
3,871 views

概要

formbridgeの特定フィールドにて
「●文字以上、●文字以下に文字数が収まっていない場合はエラー」と制御する事で、
想定パターンのみでしかデータ送信させないようにする

デモ動画

「童話_タイトル」フィールド
→入力文字数2文字以上、50文字以下で無い場合にエラー表示
「童話_本文」フィールド
→入力文字数20文字以上、200文字以下で無い場合にエラー表示

formbridge(フォームブリッジ)とは？

**※「このwebフォームからご回答ください」だけで済み、kintoneの説明が不要なのが大きなメリット**

プログラムを作成した理由

担当者がformbridgeにデータ入力、回答をして頂く業務があるのですが、
下記のように「注意事項」を記載しているにも関わらず、守られない事が多々あります

「タイトル(50文字まで)」フィールド
・100文字以上記載してしまう
・入力が面倒なのか「-」と1文字だけ入れる
「郵便番号(ハイフン込み)」フィールド
・ハイフンの記載が無い
「商談日時(時刻も設定する事)」フィールド
・時刻が初期値のまま「2022/09/18 00:00:00」で設定してしまう

これらに対して、
「何で注意書き読まずに入力してくるんだろう…」と嘆いていても仕方ないので、

「そもそも正しい入力方法でない場合はエラーで回答させない」
という方針で対応せざるを得なくなりました←

ソースコード
(※複数フィールドのエラー制御)

/*
概要：FBにてフィールド制御
*/

(function () {

    'use strict';

    // FBが開かれた時のイベント
    // 参考：https://developer.cybozu.io/hc/ja/community/posts/900001013363-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E5%80%A4%E3%81%8C%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84
    fb.events.form.created.push(function (state) {

        // 「童話_タイトル」に「title_err_event」イベントを紐づける
        state.fields.find(field => field.code === '童話_タイトル').validations.push({ // 対象フィールドのフィールドコード
            params: [],
            rule: 'title_err_event'
        });

        // 「童話_本文」に「contents_err_event」イベントを紐づける
        state.fields.find(field => field.code === '童話_本文').validations.push({ // 対象フィールドのフィールドコード
            params: [],
            rule: 'contents_err_event'
        });

        return state;

    });
    
    // エラーメッセージ内容、条件設定
    // ※対象フィールドが1文字でも変わったら、「validate」が常に走る
    // 参考：https://developer.cybozu.io/hc/ja/community/posts/900001013363-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E5%80%A4%E3%81%8C%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84
    fb.addValidators = function (state) {

        // エラーメッセージ定義
        const CONTENTS_ERR_MSG = "20文字以上～200文字以内で入力してください"
        const TITLE_ERR_MSG = "2文字以上～50文字以内で入力してください"

        return {

            // 「童話_タイトル」イベント
            // ※上記「rule: '●●'」と一致していれば、名称は何でもOK
            title_err_event: {
                
                // フィールド直下に表示されるエラーメッセージの設定
                getMessage: function (fieldCode, params) {
                    return TITLE_ERR_MSG;
                },

                // エラーメッセージ表示/非表示設定
                validate: function (value, params) {

                    // エラーフラグ初期化
                    let ok_flg = true

                    // 指定文字数に収まっていない場合はエラー
                    if(value.length > 50 || 2 > value.length){
                        ok_flg = false
                    }
                    
                    // False：エラー表示
                    // True：エラー非表示                    
                    return ok_flg;

                }

            },

            // 「童話_本文」イベント
            // 上記「rule: '●●'」と一致していれば、名称は何でもOK
            contents_err_event: {
                
                // フィールド直下に表示されるエラーメッセージの設定
                getMessage: function (fieldCode, params) {
                    return CONTENTS_ERR_MSG;
                },

                // エラーメッセージ表示/非表示設定
                validate: function (value, params) {

                    // エラーフラグ初期化
                    let ok_flg = true

                    // 指定文字数に収まっていない場合はエラー
                    if(value.length > 200 || 20 > value.length){
                        ok_flg = false
                    }
                
                    // True：エラー非表示
                    // False：エラー表示
                    return ok_flg;

                }

                
            }

        };
    };

})();

100

概要：FBにてフィールド制御

(function () {

'use strict';

// FBが開かれた時のイベント

// 参考：https://developer.cybozu.io/hc/ja/community/posts/900001013363-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E5%80%A4%E3%81%8C%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84

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

// 「童話_タイトル」に「title_err_event」イベントを紐づける

state.fields.find(field => field.code === '童話_タイトル').validations.push({ // 対象フィールドのフィールドコード

params: [],

rule: 'title_err_event'

});

// 「童話_本文」に「contents_err_event」イベントを紐づける

state.fields.find(field => field.code === '童話_本文').validations.push({ // 対象フィールドのフィールドコード

params: [],

rule: 'contents_err_event'

});

return state;

});

// エラーメッセージ内容、条件設定

// ※対象フィールドが1文字でも変わったら、「validate」が常に走る

fb.addValidators = function (state) {

// エラーメッセージ定義

const CONTENTS_ERR_MSG = "20文字以上～200文字以内で入力してください"

const TITLE_ERR_MSG = "2文字以上～50文字以内で入力してください"

return {

// 「童話_タイトル」イベント

// ※上記「rule: '●●'」と一致していれば、名称は何でもOK

title_err_event: {

// フィールド直下に表示されるエラーメッセージの設定

getMessage: function (fieldCode, params) {

return TITLE_ERR_MSG;

// エラーメッセージ表示/非表示設定

validate: function (value, params) {

// エラーフラグ初期化

let ok_flg = true

// 指定文字数に収まっていない場合はエラー

if(value.length > 50 || 2 > value.length){

ok_flg = false

}

// False：エラー表示

// True：エラー非表示

return ok_flg;

}

// 「童話_本文」イベント

// 上記「rule: '●●'」と一致していれば、名称は何でもOK

contents_err_event: {