2 flat logo on transparent 256
2018-04-03

jQueryでひらがなをカナに自動変換し、バリデーションを設定する|コピペで動くサンプル付き

Photo 574080

登録フォームを設定していると、ひらがなやカナ 半角カナの入力などを行うことがあると思います。

その際に送信ボタンを押した後に、エラーメッセージを出すと ユーザーが再度修整する必要があるので、かなり手間になります。

今回はJqueryを利用してひらがなをカナに自動変換し、 空値チェックとカナ以外の値が入っていないかチェックを行う設定を紹介します。

関連記事 jQueryと正規表現でフォームのバリデーションを設定する|コピペで動くサンプル付き

全ソースサンプル

下記をメモ帳で貼り付けて、中央のテキスト欄に テキストを入力します。

背景が黒い場合は問題なく、赤い場合はエラーとしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>テスト</title>
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(function () {
//            input要素のフォーカスを失ったタイミングで発生します。
            $('#input-id').blur(function () {
//              ひらがなを自動変換するイベントの呼び出し
                kanaChange($(this));
//
//              空値及びカナ以外の値が入っていないかチェックするバリデーション
                emptyCheck($(this));
            });

            kanaChange = function (ele) {
                var val = ele.val();
//                正規表現でひらがなを引数の値に置換
                var kana = val.replace(/[ぁ-ん]/g, function (s) {
                    // ユニコード値でカナに変換
                    return String.fromCharCode(s.charCodeAt(0) + 0x60)
                });

                if (val.match(/[ぁ-ん]/g)) {
                    $(ele).val(kana)
                }

            };

            emptyCheck = function (ele) {
                var val = ele.val();
//                空値の場合、背景へCSSクラス適用し、テキストを追加
                if (val == "") {
                    $('#test').addClass('color');
                    $("#msg-test").text("入力されていません。");
                }
//                カナ以外の値が入っていないる場合背景へCSSクラス適用し、テキストを追加
                else if(val.match( /[^ぁ-んァ-ン \s]+/ )) {
                    $('#test').addClass('color');
                    $("#msg-test").text("全角カナ以外が登録されています。");
                }

                else {
                    $('#test').removeClass('color');
                    $("#msg-test").text("");
                }
            };
        });
    </script>
    <style>
        /*input要素の背景と大きさの設定*/
        .Wrapper {
            text-align: center;
            background-color: black;
            color: white;
            min-width: 1200px;
        }

        /*エラーの場合、背景を赤くする*/
        .color {
            background-color: red;
        }

    </style>
</head>

<body>

<div class="Wrapper" id="test">
    <div id="msg-test"></div>
    <input type="text" id="input-id" name="text">
</div>

</body>
</html>

jQueryの解説

.blur()

まず.blur()でフォーカスが外れた場合にイベントを発火させます。 その為エラーはチェックはフォーカスを外れた場合に呼び出されます。

<script>
        $(function () {
            $('#input-id').blur(function () {

.replace()

.replace()を利用してひらがなを引数に設定されている内容に置換します。 .fromCharCode()で指定したUnicode 値でも字を返します。

            kanaChange = function (ele) {
                var val = ele.val();
                var kana = val.replace(/[ぁ-ん]/g, function (s) {
                    return String.fromCharCode(s.charCodeAt(0) + 0x60)
                });

                if (val.match(/[ぁ-ん]/g)) {
                    $(ele).val(kana)
                }

            };

.val == ""

val == ""で引数の空文字チェックを行います。

.addClass()

.addClass()は指定クラスの追加を行います。 詳細は jQueryで指定した挙動でclassを追加・削除する方法を解説|コピペで動くサンプル付き

の記事をご参照下さい

            emptyCheck = function (ele) {
                var val = ele.val();
                if (val == "") {
                    $('#test').addClass('color');

.text()

.text()は指定要素へテキストを設定したり、置換します。

            emptyCheck = function (ele) {
                var val = ele.val();
                if (val == "") {
                    $('#test').addClass('color');
                    $("#msg-test").text("入力されていません。");
                }
                else if(!val.match(/^[ァ-ン]+$/)) {
                    $('#test').addClass('color');
                    $("#msg-test").text("半角カナ以外が登録されています。");
                }
                else {
                    $('#test').removeClass('color');
                    $("#msg-test").text("");
                }
            };
        });
    </script>

その他jQueryやBootstrapの記事一覧は下記から

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

jQueryでナビゲーションを途中で固定し追随させる|コピペで動くサンプル付き

jQueryと正規表現でフォームのバリデーションを設定する|コピペで動くサンプル付き

前の記事
次の記事