新規投稿
フォローする

フォームブリッジのカスタマイズ

「条件分岐によって必須項目が隠れても、回答を完了できます!」https://kintoneapp.com/blog/required_validation/

の記事にありますように、
必須項目が表示されている時は「必須項目」として絶対に登録、
必須項目が隠れている時は「スキップ」して登録できるようにしたいのですが、

上記の記事の方法でやると、
必須項目が表示されている時でも必須にならずに登録できてしまいます。

回避策等ございますでしょうか?

また、同じようにやって出来ている方はいらっしゃいますでしょうか。

本番運用中のため、急ぎ対応したく・・・

ご教授ください。

宜しくお願い致します。

0

16件のコメント

Avatar
syunta

Cstapです

 

他のカスタマイズが影響しているということは考えられませんか?

差し障りなければフォームのURLを提示してください。

この場で提示し難いようであればサポートへ問い合わせお願いします。

0
Avatar
foopii

ご連絡ありがとうございます。

たったいま、サポート宛にお送りさせていただきました。

宜しくお願い致します。

0
Avatar
syunta

拝見しました。

他の読み込んでいる js に以下のような記述がありました。

 fb.events.form.created = [function (state) { ... }]

「=」を使用して代入する場合、既存のイベントを上書きしてしまうのでうまく動かなくなる場合があります。

以下のような記述に書きかえるとうまくいくかも知れません。

fb.events.form.created.push(function (state) { ... }) // 代入ではなく配列に要素を追加
0
Avatar
foopii

ご連絡ありがとうございます。

修正してみましたが、やはりだめでした。

というより、現状、
https://form.kintoneapp.com/static/js/togglevalidate.js

jsをこれだけに絞ってやってみましたが、それでもうまく制御出来ていません。。

何か方法はございますでしょうか。

0
Avatar
syunta

公開されているフォームを拝見しましたが、他にもいくつかjsを読み込んでいるように見受けられます。

それらを読み込まないようにしてもだめですか?

0
Avatar
foopii

はい。

https://form.kintoneapp.com/static/js/togglevalidate.js

jsをこれだけに絞ってやってみましたが、それでもうまく動作しませんでした。
必須項目を設定している項目があるにも関わらず、確認画面に遷移してしまいます。

 

0
Avatar
syunta

他にもjqueryや郵便番号関連のjsを読みこんでいますが、それらを読み込まないようにしてもうまくいきませんか?

syuntaにより編集されました
0
Avatar
foopii

はい。全て外して、下記のjsだけ登録してもうまく動作しませんでした。

https://form.kintoneapp.com/static/js/togglevalidate.js

ただ、以前試用環境で上記jsのみで試した際にはちゃんと動作したことは確認しています。
(うまく動作したので、本番で適用していましたので・・・)

なぜ出来なくなったかが分からないのです・・・。

0
Avatar
syunta

URL に ?Type=A のようにパラメータが渡されていますが、このあたりが問題かと思います。

このようにパラメータを渡すとフィールドに初期値を設定できますが、これを消すと条件分岐のフィールドが常に非表示になっています。

?Type=A 無しで動作するよう条件分岐やフィールド設定を正しく行うとよいと思われます。

0
Avatar
foopii

syunta様

ご教授ありがとうございます。

確かに、?Type=Aが効いているようです。

このパラメータ渡しを利用しつつ、上記jsを利用することは可能でしょうか?
現状、下記URLにてテストを行っておりますが、
このパラメータを使用しない場合はjsが正しく動作していますが、パラメータを使用した時に正しく動作していない状況です。

https://form.kintoneapp.com/public/form/show/1ae34a09f3bbe9f730afef22faeda32fc99c548fc8582a7c6079149e02ee1db3?Type=A#/

 

ご教授いただければ幸いです。

宜しくお願い致します。

0
Avatar
江田篤史

foopii様

お世話になっております.
cstapの江田と申します.

返信が遅くなり申し訳ございません.

ご提示いただいたtest環境(https://form.kintoneapp.com/public/form/show/1ae34a09f3bbe9f730afef22faeda32fc99c548fc8582a7c6079149e02ee1db3?Type=A#/)について,一度「jquery-2.1.0.min.js」と「住所自動入力.js」の読み込みを解除した状態にして頂けますでしょうか?

江田篤史により編集されました
0
Avatar
foopii

江田様

遅くなりました。

いま、解除致しました。

宜しくお願い致します。

0
Avatar
江田篤史

foopii様

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

「jquery-2.1.0.min.js」と「住所自動入力.js」は無関係でした.
元に戻して頂いて大丈夫です.
失礼いたしました.

条件分岐の設定が複雑になっているようですね.
https://form.kintoneapp.com/static/js/togglevalidate.js
の代わりに下記のコードを読み込んで頂けますか?

・togglevalidate.js

! function (e) {
  function n(t) {
    if (r[t]) return r[t].exports;
    var o = r[t] = {
      i: t,
      l: !1,
      exports: {}
    };
    return e[t].call(o.exports, o, o.exports, n), o.l = !0, o.exports
  }
  var r = {};
  n.m = e, n.c = r, n.d = function (e, r, t) {
    n.o(e, r) || Object.defineProperty(e, r, {
      configurable: !1,
      enumerable: !0,
      get: t
    })
  }, n.n = function (e) {
    var r = e && e.__esModule ? function () {
      return e.default
    } : function () {
      return e
    };
    return n.d(r, "a", r), r
  }, n.o = function (e, n) {
    return Object.prototype.hasOwnProperty.call(e, n)
  }, n.p = "/", n(n.s = 928)
}({
  928: function (e, n) {
    var r = {},
      t = function (e, n) {
        switch (n.rule) {
        case "=":
          return e[n.field].value === n.value;
        case "!=":
          return e[n.field].value !== n.value;
        case "In":
          return -1 !== e[n.field].value.indexOf(n.value);
        case "Not in":
          return -1 === e[n.field].value.indexOf(n.value)
        }
        return !0
      },
      o = function (e, n) {
        return "and" === n.logical ? n.rules.reduce(function (n, r) {
          return n && t(e, r)
        }, !0) : n.rules.reduce(function (n, r) {
          return n || t(e, r)
        }, !1)
      },
      u = function (e, n, t) {
        e.fields.filter(function (e) {
          return -1 !== n.indexOf(e.code)
        }).forEach(function (e) {
          e.show = false, e.validations = []
        })
        t.forEach(function (n) {
          var t = o(e.record, n);
          e.fields.filter(function (e) {
            return -1 !== n.fields.indexOf(e.code)
          }).forEach(function (e) {
            if(!t) return;
            e.show = true, e.validations = e.validations.concat(r[e.code])
          })
        })
      };
    fb.events.form.created.push(function (e) {
      return e.form.isBranchForm && (e.fields.forEach(function (e) {
        r.hasOwnProperty(e.code) || (r[e.code] = e.validations)
      }), e.form.branches.forEach(function (n) {
        n.fields.forEach(function (e) {
          fb.events.fields[e].changed.push(function (e) {
            return u(e, n.availableFields, n.conditions), e
          })
        }), u(e, n.availableFields, n.conditions)
      })), e
    })
  }
});
0
Avatar
foopii

江田様

 

ご連絡が大変遅くなりました。

試してみましたが、うまく動作しました。
ありがとうございます。

ちなみに、こちらは汎用性のあるコードでしょうか。
今回の環境のみうまくいったのでしょうか?

教えてください。

宜しくお願い致します。

 

0
Avatar
江田篤史

foopii様

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

他の環境でも利用可能な、汎用性のあるコードとなっております。
今回のように、「同じフィールド」を複数の条件分岐で「条件を満たした場合に表示するフィールド」に指定した場合は、上記をご利用ください。

今後ともよろしくお願いいたします。

0
Avatar
foopii

江田様

ありがとうございます!

これからも使用します!

また宜しくお願い致します。

0
サインインしてコメントを残してください。