2

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

1

2 Answers 2

5

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

1
  • can it be achieved with vanilla js?
    – Beki
    Jun 1, 2022 at 9:39
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.