【テクニック】jQueryで実装する必須項目の入力チェックをする方法

RELEASE / 2023.11.6 UPDATE / 2023.11.16

jQuery

バリデーション

フォーム

WEBサイトにはユーザーからのお問い合わせやECサイトの場合、ネット注文、会員登録などさまざまな用途で入力フォームが設置されます。
そのフォームには、WEBサイトやサービスを利用してもらうためには必ず入力してもらわないといけない項目というものも存在すると思います。
例えば、ユーザーとの連絡手段である電話番号やメールアドレスのどちらも入力されていなかった場合、そのユーザーと連絡を取り合うことは難しくなるか、もしくは不可能となってしまうかもしれません。
せっかく問い合わせを行ってくれたユーザーを逃してしまう恐れがあります。
今回の記事では確実に入力してもらいたい項目は入力漏れを防ぐためのプログラムをjQueryを用いて作成する方法をご紹介します。

この記事の目次を表示

1 jQueryで実装する必須項目の入力チェックをする方法
- 1.1 実装画面
2 まとめ

jQueryで実装する必須項目の入力チェックをする方法

早速、必須項目を全て入力していないと送信できないjQueryを使用したプログラムを確認してみましょう。
まず始めにjQueryを使用するという事で、必ずjQueryを読み込むようにします。
今回はvar3系の記述方法となっていますのでjQueryのvar3、このブログを執筆した時点での最新のバージョンを使用していきます。

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>

このようにjQueryを読み込んでおきましょう。今回はCDNにて読み込んでいます。

HTML

<form>
    <dl>
        <dt>お名前</dt>
        <dd><input type="text" name="name" required></dd>
    </dl>
    <dl>
        <dt>ふりがな</dt>
        <dd><input type="text" name="kana" required></dd>
    </dl>
    <dl>
        <dt>性別</dt>
        <dd>
            <labe>
                <input type="radio" name="sei" required value="男性"><span>男性</span>
            </label>
            <labe>
                <input type="radio" name="sei" required value="女性"><span>女性</span>
            </label>
        </dd>
    </dl>
    <dl>
        <dt>お問い合わせ内容</dt>
        <dd><textarea name="comment" required></textarea></dd>
    </dl>
    <dl>
        <dt>プライバシーポリシーに同意</dt>
        <dd>
            <labe>
                <input type="checkbox" name="policy2" required value="同意する"><span>同意する</span>
            </label>
        </dd>
    </dl>
    <p><input type="submit" value="送信" disabled></p>
</form>

HTMLの構造はサンプルとしてこのようにしました。
今回ご紹介するものは各入力項目のrequired属性を手掛かりに必須項目が入力済みかどうか判断する為、
各タグのidやname属性を気にしたり、フィールドの数を気にしたりする必要はありません。
submitボタンにはデフォルトでは送信ボタンが動作しないようにdisable属性を設定しておきます。

jQuery

$(document).ready(function() {
    function checkForm() {
        // 全ての必須フィールドを検証
        var allFilled = true;
        $('form :input[required]').each(function() {
            if ($(this).is(':checkbox')) {
                // チェックボックスの場合、同じname属性を持つチェックボックスのグループ内で少なくとも一つがチェックされているか
                if ($('input[name="' + $(this).attr('name') + '"]:checked').length === 0) {
                    allFilled = false;
                    return false;
                }
            } else if (!$(this).val()) { // その他のフィールドの場合
                allFilled = false;
                return false;
            }
        });

        // 送信ボタンの有効/無効を切り替え
        $('form input[type="submit"]').prop('disabled', !allFilled);
    }

    // フォームの入力が変更されるたびにチェックする
    $('form').on('change keyup', ':input[required]', function() {
        checkForm();
    });

    // 初期チェック
    checkForm();
});

jQueryのコードは上のようになります。
「input」「textarea」「select」「checkbox」など、どのような入力要素が何個ずつあっても動作します。
これはreqired属性が設定されている入力要素全てに対して入力済みかチェックするためです。
なお、「checkbox」のみ他とは少し違う方法にて入力済みかどうかをチェックする必要があるため、それ用の分岐を追加しています。
checkForm関数はフォームの値が変更される度、またページが読み込まれた初回に実行されるようにしています。
これにより、ページ読み込み時にも必須項目が入力済みかどうかをチェックし、送信ボタンの状態を正しくセットすることが出来ます。

実装画面

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

今回の記事ではフォームの必須項目が全て入力されて初めて送信ボタンが押せるjQueryのコードをご紹介しました。
フォームはユーザーからの必要な項目を確実に管理者へ伝える必要のあるWEBサイトの中での重要な機能を担っています。
メールアドレスや電話番号など、必ず必要な項目が入力されていないと、今後の連絡や手続きなどが進められないという事も起りうる可能性があります。
今回ご紹介したのはjQueryを使用したフロントエンド側での項目チェックとなっています。
フォームのチェックは複数回チェックし、もしものアクシデントに備えるためにもバックエンド側のPHP等でも同様にチェックをして出来る限り入力漏れを防いでいきたいですね。