フォームの入力バリデーション：空白や全角スペースの無効化方法

Posted on by

フォームバリデーションでは、空白だけや全角スペースのみの入力を
許可してしまうことが課題になる場合があります。
この記事では、特に「氏名」「電話番号」「メールアドレス」の
入力フィールドに対するバリデーションの実装方法について解説します。

問題点

一般的なHTML5のrequired属性では、次のような入力が通過してしまう場合があります。

  1. 空白だけの入力：半角スペースや全角スペースのみ。
  2. 無効な形式：例えば、電話番号やメールアドレスがフォーマットに合致しない。

これらを防ぐには、HTML5の基本機能に加えて、
JavaScriptでカスタムバリデーションを実装する必要があります。

解決方法

以下のコードでは、氏名の全角スペース、電話番号の無効なフォーマット、
メールアドレスの正しい形式をチェックする仕組みを統合しています。

HTMLコード

まず、基本的なフォームのHTMLを用意します。

<form>
    <table>
        <tr>
            <th>氏名<span class="must">必須</span></th>
            <td>
                <input type="text" name="name" id="name" class="input-text validate[required]" placeholder="氏名を入力" required>
            </td>
        </tr>
        <tr>
            <th>電話番号<span class="must">必須</span></th>
            <td>
                <input type="tel" name="tel" id="tel" class="input-text validate[required]" placeholder="電話番号を入力" required>
            </td>
        </tr>
        <tr>
            <th>メールアドレス<span class="must">必須</span></th>
            <td>
                <input type="email" name="email" id="email" class="input-text validate[required]" placeholder="メールアドレスを入力" required>
            </td>
        </tr>
    </table>
</form>

JavaScriptコード

フォームのバリデーションをJavaScriptで実装します。
全角スペースの削除や、正しい形式をチェックする正規表現を利用します。

document.addEventListener('DOMContentLoaded', function () {
    // 入力バリデーション関数
    function validateInput(field) {
        const value = field.value.replace(/\s+/g, '').trim(); // 半角・全角スペースを削除
        let errorMessage = '';

        // フィールド別のバリデーション
        switch (field.id) {
            case 'tel':
                if (!/^\d{10,11}$/.test(value)) {
                    errorMessage = '10桁または11桁の数字を入力してください。';
                }
                break;

            case 'name':
                if (value === '') {
                    errorMessage = '氏名を入力してください。空白や全角スペースのみは無効です。';
                }
                break;

            case 'email':
                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (value === '') {
                    errorMessage = 'メールアドレスを入力してください。';
                } else if (!emailPattern.test(value)) {
                    errorMessage = '正しいメールアドレス形式で入力してください。';
                }
                break;
        }

        // エラー設定またはクリア
        field.setCustomValidity(errorMessage);
    }

    // 対象フィールドリスト
    const fields = ['tel', 'name', 'email'];

    // 各フィールドにイベントリスナーを設定
    fields.forEach(function (id) {
        const field = document.getElementById(id);
        if (field) {
            field.addEventListener('input', function () {
                validateInput(field);
            });
        }
    });
});

動作の詳細

氏名のバリデーション

チェック内容
全角スペースや半角スペースのみの入力を防ぎます。

コードポイント
javascriptコードをコピーする
if (value === '') { errorMessage = '氏名を入力してください。空白や全角スペースのみは無効です。'; }

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

チェック内容
10桁または11桁の数字のみを許可。

コードポイント
javascriptコードをコピーする
if (!/^\d{10,11}$/.test(value)) { errorMessage = '10桁または11桁の数字を入力してください。'; }

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

チェック内容
有効なメールアドレス形式かを検証。

コードポイント
javascriptコードをコピーするconst emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(value)) { errorMessage = '正しいメールアドレス形式で入力してください。'; }

テストケース

以下のテストケースを利用して、バリデーションの動作を確認してください。

入力内容フィールド結果
　（全角スペースのみ）氏名エラー「氏名を入力してください。」
123電話番号エラー「10桁または11桁の数字を入力してください。」
abc@xyzメールアドレスエラー「正しいメールアドレス形式で入力してください。」
山田 太郎氏名通過
09012345678電話番号通過
user@example.comメールアドレス通過

メリット

コードの再利用性
一つの関数で複数のフィールドを処理可能。

可読性の向上
バリデーションルールをまとめて管理。

ユーザー体験の向上
フォームの入力中にエラーを即座に通知。

まとめ

空白や全角スペースを無効化し、正しい形式を保証する
フォームバリデーションは、ユーザー入力の質を高め、データの信頼性を向上させるために重要です。
この記事で紹介したコードをカスタマイズすることで、ニーズに合わせたフォームを実現できます。