サブテーブル内のフィールドに文字数制限をかけたい

[misa]

JavaScript初心者です。
サブテーブル内の「調理工程」という項目に、95文字以上入力された場合に、エラーを出したいです。
下記コードで設定したところ、保存ボタンが押せない状態になってしまいます。
お手数おかけしますが、どのように設定したら良いかご教示いただけますと幸いです。

(function() {
  "use strict";

  // 「調理工程」フィールドのコード
  var fieldCode = "調理工程";
  // 制限文字数
  var characterLimit = 95;

  kintone.events.on(['app.record.create.submit','app.record.edit.submit','app.record.index.edit.submit'], function (event) {
    var record = event.record;

    // フィールドの値を取得
    var fieldValue = record[fieldCode].value;

    // サブテーブル内の各行に対して文字数が制限を超えているかチェック
    for (let i = 0; i < record.調理工程.value.length; i++) {
      var subtableRow = record.調理工程.value[i];
      if (subtableRow.value[fieldCode].length > characterLimit) {
        event.error = "「" + fieldCode + "」フィールドの文字数は" + characterLimit + "文字以下で入力してください。";
        return event;
      }
    }
  });
})();

[hosoya (細谷崇)]

event.error にエラー文字をセットして retune event してるので、保存ができないのだと思います。（エラーなので保存をさせないようになっている）
文字数オーバーの場合はどのようにしたいのでしょうか？？

[misa]

細谷さま
コメントいただきありがとうございます！

前提の記載がなく失礼いたしました。
文字数オーバーの場合は、エラーは表示させるが保存はさせたいです。

[misa]

JavaScriptを以下のように修正しまして、
”サブテーブル「調理手順リスト」内の「調理工程」という項目に95文字以上入力された場合に、エラーを出すが保存はさせる”
ことは実現できました。
ただし、できれば調理工程項目の脇に、入力時に文字数をカウントする表記を入れたいです。
「30/95文字」といった形です。
どなたかお力添えいただけますと幸いです。。

(() => {
  "use strict";

  kintone.events.on(
    ["app.record.create.submit","app.record.edit.submit","app.record.index.edit.submit"],
    (event) => {
      const record = event.record;
      const characterLimit = 95;
      let hasError = false; 

      for (let i = 0; i < record.調理手順リスト.value.length; i++) {
        if (record['調理手順リスト'].value[i].value['調理工程'].value) {
          if (record.調理手順リスト.value[i].value.調理工程.value.length > characterLimit) {
            record.調理手順リスト.value[i].value.調理工程.error = "95文字以上入力されています";
            hasError = true; 
          }
        }
      }

      if (hasError) {
        event.error = "調理工程は95文字以内に収めてください";
      }

      return event;
    }
  );
})();

[y_minamitani9534 (Yuki_Minamitani)]

@misa さん

こんにちは、少し難しそうですが一応できそうではありますね。
一応ぱっと思いついたフローを書くと、
レコード新規・編集画面表示イベント、テーブル行変化（チェンジ）イベントでテーブル自体のDOMを取得
↓
それぞれのイベントでテーブルのDOM要素からchilrenなどの子要素を辿って目的のテーブル内の文字列複数行のDOMを取得 テーブルのチェンジイベントだとテーブル行の増減の度取得
↓
複数行に対してDOMイベントを追加
以下のイベントを使って対象の文字列複数行に入力されるたびに検知。

//例)
textarea.addEventListener('input', ()=>{
    //こちらにしたい処理
})

↓
上記のコードの「こちらにしたい処理」のところにカウントして表示させるよう要素を作成して表示

といった形だと思われます。
こちらcybozu社としても非推奨なDOM操作の仕方で、kintoneのアップデートでいずれ使えなくなる可能性があるのでそのたびにメンテナンスが必要になるかと思うのでこちらも考慮すべきかなと思っています。