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

t.cooさん

こんにちは。

以下にあるfb.addValidatorsでバリデーションチェックを定義できます。

FormBridge JavaScriptカスタマイズ

全角カタカナで構成されるかどうかは、以下で判定できます。

str = (str == null) ? "" : value;
if (str.match(/^[ァ-ヶー ]+$/)) {
return true;
} else {
// 全角カタカナ以外が含まれる
return false;
}

これらを組み合わせて、FormBridgeでは以下のように定義します。

(function() {

    'use strict';

    fb.addValidators = function(state) {
        return {
            katakana_validation: {
                // エラーメッセージ内容
                getMessage: function(fieldCode, params) {
                    return '全角カタカナで入力してください。';
                },
                // エラー判定条件
                validate: function(value, params) {
// valueは全角カタカナのフィールドに入力された値
                    value = (value == null) ? "" : value;
                    if (value.match(/^[ァ-ヶー ]+$/)) {
                        return true;
                    } else {
                        // 全角カタカナ以外が含まれる場合はエラー
                        return false;
                    }
                }
            }
        }
    };

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

})();