【フォームブリッジ】携帯番号のみを入力できるようにしたい

まったくの初心者の質問ですみません、

表題の通り、フォームで

・11桁、070/080/090から始まる携帯番号のみを入力できるようにしたい

です。

過去に↓のような質問もありましたが上手くいかず、

https://developer.cybozu.io/hc/ja/community/posts/202944514-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%A7%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7%E3%81%AE%E5%88%A4%E5%AE%9A%E3%82%92%E8%A1%8C%E3%81%84%E3%81%9F%E3%81%84%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8C-

色々調べて下記のようなコードを書いてみたのですが、まったく動きません。

(function() {
    ‘use strict’;
    fb.events.form.mounted = [function(state) {
      var tel = fb.getElementByCode(‘te’);
      if(te.match(/^0[5789]0\d{8}$/)){
        return true;
      } else if(te.match(/^0[3]\d{8}$/)){
        alert(‘携帯番号をご入力ください。’);
        return false;
      } else {
        alert(‘携帯番号をご入力ください。’);
        return false;
      }
    }];
})();

ちんぷんかんぷんでお恥ずかしい限りですが、どなたか対応策をお教えいただければ幸いです。

何とぞよろしくお願いいたします。

ikkaさん

こんにちは。

 

フォームブリッジのエラーチェック(バリデーション)の書き方は、JavaScriptカスタマイズに記載があります。

 fb.addValidators を使い、バリデーションを定義します。

 

050もエラーにする場合は /^0[789]0[0-9]{8}$/ としてください。

(function() {

    'use strict';

    fb.addValidators = function(state) {
        return {
            tel_validation: {
                // エラーメッセージ内容
                getMessage: function(fieldCode, params) {
                    return '携帯番号を入力してください。';
                },
                // エラー判定条件
                validate: function(value, params) {
                    if (value.match(/^0[5789]0[0-9]{8}$/)) {
                        // 問題なし
                        return true;
                    } else {
                        // 携帯番号でないとき
                        return false;
                    }
                }
            }
        }
    };


    fb.events.form.created = [function(state) {
        // 全フィールドからエラーを出したいフィールドを検索
        state.fields.filter(function(field) {
            // エラーを出したいフィールド
            return field.code === 'TEL';
        })[0].validations.push({
            params: [],
            rule: 'tel_validation'  // fb.addValidatorsで定義した中から適用したいバリデーション名
        });
        return state;
  }];

})();

Koichiさん

早速のご回答いただきありがとうございます!

この度もお世話になります。

 

バリデーションについてお教えいただきありがとうございました。

頂いたコードを使用してみたのですが、なぜか携帯電話番号のフォームに「0」を入力した時点で「携帯番号を入力してください。」と出てきていましました。

変更した箇所は

・value.matchの「5」を削除

・field.codeを実際に使用しているものに変更

したのみです。

その他に変えるべき箇所はありますでしょうか?

お手数おかけしてしまい恐縮ですがお教えいただければ幸いです。

何とぞよろしくお願いいたします。

ikkaさん

ご確認ありがとうございます。

 

1文字入力しただけで出てくるのはバリデーションの仕様ですね。

文字を打つたびにバリデーションチェックを行うためです。

 

kintoneと違って、確認ボタンを押したときにだけチェックを行うということができないのです。

Koichiさん

ご回答ありがとうございます!

なるほど仕様なんですね。

承知いたしました。

ありがとうございました!!

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