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

お世話になります。

フォームブリッジで全角カタカナのみに限定したい特定のフォームがあります。銀行口座名義の項目で、フィールコードで指定するイメージです。
カスタマイズを試みてみましたが、当方JavaScript初心者のため、実現できずに困っております。厚かましいお願いですが、サンプルコードなどで対処方法を教えていただけませんでしょうか?

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

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;
  }];

})();

koichi さん

お世話になります。
サンプルコードありがとうございます。
ソース内に詳しくコメントまで書いていただき感謝です。

動作も問題ありませんでした。
いただきましたコードをもとに勉強させてもらいます。

この度はありがとうございました。

初めまして。私もこちらを使用させていただいてうまくいきました。

同じフォーム内で、以下のように複数の文字種のチェックしたい場合、どのように記述すればよいか

教えていただけますでしょうか?

全角カナ:項目1、項目2

半角カナ:項目3

 

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