Allow only half width katakana (Japanese) characters in text box

Question

In my rails app I have a text field like this

<%= f.text_field :guaranter_furigana_name, autocomplete: "off", class: "form-control", placeholder: "例：ヤマダ タロウ（全角カナ）", maxlength: "50",  :disabled => @disabled_field %>

I am using jQuery to validate this text field accepts only half width katakana characters (Unicode values from ff60 to ff9f). This is what I tried

// Allow only half width kana for guranter フリガナ
$(function (){
  $("#t_user_name_register_guaranter_furigana_name").on("input", function(e){

    var key = e.keyCode || e.charCode;

    var inp = String.fromCharCode(key);

    var kanaregexp = new RegExp('[\uff00-\uff9f]');
    if (kanaregexp.test(inp) != true){
      if( key != 8 && key != 46 && key != 32){
        inp = $(this).val();
        $(this).val(inp.slice(0,-1));
        $("#telno_errmsg").html("半角カナ字のみを入力してください。").show().fadeOut(3000);
        return false;
      }
    }
  });
});

The code is a mess and not working always. Please help

It's not JQuery, but [Validate Japanese Character in Active Record Callback](http://stackoverflow.com/q/15631168/567863) might assist you. — Paul Fioravanti, Aug 08 '16 at 07:48

score 5 · Answer 1 · answered Dec 19 '16 at 01:50

For people who are looking for different jQuery validation rules while working with Japanese Text.

//Hiragana and Katakana

jQuery.validator.addMethod("kana", function(value, element) {
 return this.optional(element) || /^([ァ-ヶーぁ-ん]+)$/.test(value);
 }, "<br/>全角ひらがな･カタカナを入力してください"
);

//Only Hiragana

jQuery.validator.addMethod("hiragana", function(value, element) {
 return this.optional(element) || /^([ぁ-ん]+)$/.test(value);
 }, "<br/>全角ひらがなを入力してください"
);

// Only katakana

jQuery.validator.addMethod("katakana", function(value, element) {
 return this.optional(element) || /^([ァ-ヶー]+)$/.test(value);
 }, "<br/>全角カタカナを入力してください"
);

//Half character kana

jQuery.validator.addMethod("hankana", function(value, element) {
 return this.optional(element) || /^([ｧ-ﾝﾞﾟ]+)$/.test(value);
 }, "<br/>半角カタカナを入力してください"
);

// Only alphabets

jQuery.validator.addMethod("alphabet", function(value, element) {
 return this.optional(element) || /^([a-zA-z\s]+)$/.test(value);
 }, "<br/>半角英字を入力してください"
);

For more, check here

can it be achieved with vanilla js? – Beki Jun 01 '22 at 09:39 — Beki, Jun 01 '22 at 09:39

score 1 · Answer 2 · edited May 07 '18 at 05:00

By JS:

Check katakana only:

function checkKataKana (input_val, event) {
    var code = 0;
    var each_val = input_val.split('');
    $.each(each_val, function (key, value) {
        code = value.charCodeAt();
        if (!(12449 <= code && code <= 12538)) {
            flag=1;
        }
    });
}

Check half-width number:

function check_Half_width_Number (input_val, event) {
    var code = 0;
    var each_val = input_val.split('');
    $.each(each_val, function (key, value) {
        code =value.charCodeAt();
        if ((12352<= code && code <= 12447) || 
            (12448<= code && code <= 12543) || 
            (19968<= code && code <= 19893)) {
            flag=1;
        }
    });
}

Allow only half width katakana (Japanese) characters in text box

2 Answers2