2 flat logo on transparent 256
2018-04-21

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

231231

Webサービスを作成する際にフォームは高確率で作成するかと思います。そのフォームのerrorチェックは各プログラミング言語でも対応可能ですが、プログラミング言語でerrorチェックを行うには、送信ボタンを押した後にしかチェックができません。

その為今回はフロントエンドのjQueryと正規表現を利用して 送信ボタンを押す前に各項目のバリデーションを行う設定を解説します。

正規表現とは

様々な文字列や文字の種類を、1つの文字列で表現する事を指します。 これによって、半角カナや全角カナ、記号などのチェックを行う事が可能になります。

バリデーションの概要

各項目が正しく入力された場合は、右側にチェックのマークを表示する

各項目でバリデーションを設定し、各項目ごとにエラーを表示する

フォーム画像

なお、アイコンはCDNで読み込めるfont awesomeを利用しています。

font awesome詳細は下記から

サイトへ簡単にアイコンを無料設定できる|Font Awesomeの使い方

サンプルコード

いつも通りサンプルをhtmlファイルにコピペして、処理を確認して見てください。

<!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/3.2.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/yeti/bootstrap.min.css" rel="stylesheet">
<!--fontawesome用-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"
            integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+"
            crossorigin="anonymous"></script>

    <script>
        $(function () {
//           画面読み込み時にアイコンが表示されないようにする
            $('#kana-icon').hide();
            $('#name-icon').hide();
            $('#email-icon').hide();
            $('#tel-icon').hide();

//           input要素のフォーカスを失ったタイミングで発生します。
            $('#name').blur(function () {
//              空値及び数字記号が入っていないかチェックするバリデーション
                emptyNameCheck($(this));
            });


            $('#name-kana').blur(function () {
//              ひらがなを自動変換するイベントの呼び出し
                kanaChange($(this));
//
//              空値及びカナ以外の値が入っていないかチェックするバリデーション
                emptyKanaCheck($(this));
            });

            $('#email').blur(function () {
//
//              空値及びメールアドレス以外が入っていないかチェックするバリデーション
                emptyEmailCheck($(this));
            });

            $('#tel').blur(function () {
//
//              空値及び電話番号以外が入っていないかチェックするバリデーション
                emptyTelCheck($(this));
            });


            emptyNameCheck = function (ele) {
                var val = ele.val();
//                空値の場合、背景へCSSクラス適用し、テキストを追加
                if (val == "") {
                    $("#msg-name").addClass('color');
                    $("#msg-name").text("入力されていません。");
                    $('#name-icon').hide();
                }
//                数字記号が入っている場合背景へCSSクラス適用し、テキストを追加
                else if (val.match(/^([\w\u3040-\u309f])\*$|\d+|[a-zA-Z]|[!-/]|[:-?]|[[-`]|[{-~]|["!”#$%&’()=|‘{+*}<>?_-^¥@「;:」、。・" ]/)) {
                    $('#msg-name').addClass('color');
                    $("#msg-name").text("名前が正しくありません。");

                    $('#name-icon').hide();
                }

                else {
                    $('#msg-name').removeClass('color');
                    $("#msg-name").text("");
                    $('#name-icon').show();
                }
            };

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

            };

            emptyKanaCheck = function (ele) {
                var val = ele.val();
//                空値の場合、テキストを追加
                if (val == "") {
                    $("#msg-kana").addClass("color");
                    $("#msg-kana").text("入力されていません。");
                    $("#kana-icon").hide();
                }
//                カナ以外の値が入っている場合、テキストを追加
                else if (val.match(/[^ぁ-んァ-ン \s]+/)) {
                    $("#msg-kana").addClass("color");
                    $("#msg-kana").text("全角カナ以外が登録されています。");

                    $("#kana-icon").hide();
                }

                else {
                    $("#msg-kana").removeClass("color");
                    $("#msg-kana").text("");
                    $("#kana-icon").show();
                }
            };

            emptyEmailCheck = function (ele) {
                var val = ele.val();
//                空値の場合、テキストを追加
                if (val == "") {
                    $("#msg-email").addClass('color');
                    $("#msg-email").text("入力されていません。");
                    $("#email-icon").hide();
                }
//                カナ以外の値が入っている場合背景へCSSクラス適用し、テキストを追加
                else if (!val.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
                    $("#msg-email").addClass("color");
                    $("#msg-email").text("@以降が入力されていないか、メールアドレス以外の情報が登録されています。");

                    $("#email-icon").hide();
                }

                else {
                    $("#msg-email").removeClass("color");
                    $("#msg-email").text("");
                    $("#email-icon").show();
                }
            };

            emptyTelCheck = function (ele) {
                var val = ele.val();
//                空値の場合、背景へCSSクラス適用し、テキストを追加
                if (val == "") {
                    $("#msg-tel").addClass('color');
                    $("#msg-tel").text("入力されていません。");
                    $("#tel-icon").hide();
                }
//                電話以外の値が入っている場合、背景へCSSクラス適用し、テキストを追加
                else if (!val.match(/^(\d{2,3}-){0,1}\d{1,4}-\d{2,4}-\d{2,4}$/)) {
                    $("#msg-tel").addClass("color");
                    $("#msg-tel").text("ハイフンが登録されていないか、電話番号が正しく入力されていません");

                    $("#email-tel").hide();
                }

                else {
                    $("#msg-tel").removeClass("color");
                    $("#msg-tel").text("");
                    $("#tel-icon").show();
                }
            };
        });
    </script>
    <style>

        .color {
            color: red;
        }

        .m-t-50 {
            margin-top: 50px;
        }

        .flex {
            display: flex;
        }

        .icon_design {
            color: green;
            margin-top: 2px;
        }

        .input_design {
            border: 1px solid black;
        }

        .submit-color {
            background: #8bc34a;
            color: white;
            width: auto;
            padding: 10px 30px;
            font-size: 20px;
        }

    </style>
</head>

<body>
<div class="content container">
    <div class="row">
        <div class="flex m-t-50">
            <div class="title-label col-xs-4 col-md-3">
                <label>お名前フルネーム(全角)</label>
            </div>
            <div class="input-label col-xs-6 col-md-3">
                <input type="text" id="name" class="input_design" placeholder="山田 太郎">
                <div id="msg-name"></div>
            </div>
            <div class="icon_design col-xs-2" id="name-icon">
                <i class="fa fa-check-circle"></i>
            </div>

        </div>


        <div class="flex  m-t-50">
            <div class="title-label col-xs-4 col-md-3">
                <label>お名前フルネームカナ(全角)</label>
            </div>
            <div class="input-label col-xs-6 col-md-3">
                <input type="text" id="name-kana" class="input_design" placeholder="ヤマダ タロウ">
                <div id="msg-kana"></div>
            </div>
            <div class="col-xs-2 icon_design col-md-3" id="kana-icon">
                <i class="fa fa-check-circle"></i>
            </div>
        </div>

        <div class="flex  m-t-50">
            <div class="title-label col-xs-4 col-md-3">
                <label>メールアドレス</label>
            </div>
            <div class="input-label col-xs-6 col-md-3">
                <input type="email" id="email" class="input_design" placeholder="[email protected]">
                <div id="msg-email"></div>
            </div>
            <div class="col-xs-2 icon_design col-md-3" id="email-icon">
                <i class="fa fa-check-circle"></i>
            </div>
        </div>

        <div class="flex  m-t-50">
            <div class="title-label col-xs-4 col-md-3">
                <label>電話番号(ハイフンあり)</label>
            </div>
            <div class="input-label col-xs-6 col-md-3">
                <input type="tel" id="tel" class="input_design" placeholder="03-1234-5678">
                <div id="msg-tel"></div>
            </div>
            <div class="col-xs-2 icon_design col-md-3" id="tel-icon">
                <i class="fa fa-check-circle"></i>
            </div>
        </div>
        <div class="m-t-50">
            <input class="submit-color" data-disable-with="送信中..." id="submit" type="submit" value="会員登録する">
        </div>

    </div>
</div>
</body>
</html>

お名前フルネーム(全角)のバリデーション

空文字チェックの他に、数字記号英語の他に 一部全角の記号もバリデーションの対象としています。 チェックには下記部分で正規表現を適用しています。 ※一様半角も入力できるように しています。

jQueryの名前の処理対象箇所

else if (val.match(/^([\w\u3040-\u309f])\*$|\d+|[a-zA-Z]|[!-/]|[:-?]|[[-`]|[{-~]|["!”#$%&’()=|‘{+*}<>?_-^¥@「;:」、。・" 〜]/)) 

お名前フルネーム カナのバリデーション

カナでは、ひらがなを入力すると自動でカナに変換する処理を加えています こちらでは、全角・半角問わず、カナ以外は全てエラーを表示する設定にしています。

jQueryのカナの処理対象箇所

//                カナ以外の値が入っている場合、テキストを追加
                else if (val.match(/[^ぁ-んァ-ン \s]+/)) 

メールアドレスのバリデーション

メールアドレスは半角英数の他に@が入力されていなければエラーを出す処理にしています。

jQueryのメールアドレス処理対象箇所

 else if (!val.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-][email protected][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) 

なお今回は設定していませんが、フリーメールアドレスが登録された場合もエラーを出すなどの処理も可能です。

電話番号のバリデーション

数字以外にも電話番号はハイフンが入力されていなければエラーにしています。

jQueryの電話番号処理対象箇所

  else if (!val.match(/^(\d{2,3}-){0,1}\d{1,4}-\d{2,4}-\d{2,4}$/))

電話番号でも携帯電話が登録された場合はエラーを出す設定なども可能です。

入力が正しい場合の処理

入力が正しい場合はFont Awesomeでアイコンを表示しています。 アイコンは各項目に設定し、画面が呼ばれた時は非表示にしており、入力チェックを行って問題無い場合はhtmlの要素を表示するという処理に設定しています。

実際にサンプルコードで動作を確認しながら確認された方がイメージが付きやすいと思います。 是非サンプルコードをhtmlファイルなどに貼り付けてご確認ください

その他フロントエンドの記事は下記から

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

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

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

Vue.jsでマークダウンに対応したメモ帳アプリを作成する|コピペで動くサンプルコード付き

前の記事
次の記事