(Sample)

フォームに入力した内容が一定の要件を満たしていないと、リアルタイムに注意書きが表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>リアルタイムバリデーション付きユーザー登録フォーム</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .login-form {
            max-width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
        }
        .form-group button:disabled {
            background-color: #aaa;
            cursor: not-allowed;
        }
        .error {
            color: red;
            font-size: 14px;
            display: none;
        }
    </style>
</head>
<body>

<h1>リアルタイムバリデーション付きユーザー登録フォーム</h1>

<form class="login-form" id="loginForm" onsubmit="handleSubmit(event)">
    <div class="form-group">
        <label for="username">ユーザー名（メールアドレス）:</label>
        <input type="text" id="username" name="username" required oninput="validateUsername()">
        <div class="error" id="usernameError">有効なメールアドレスを入力してください。</div>
    </div>
    <div class="form-group">
        <label for="password">パスワード(最低4文字):</label>
        <input type="password" id="password" name="password" required oninput="validatePassword()">
        <div class="error" id="passwordError">パスワードは4文字以上で入力してください。</div>
    </div>
    <div class="form-group">
        <button type="submit" id="submitBtn">ユーザー登録</button>
    </div>
</form>

<script>
    function validateUsername() {
        const username = document.getElementById('username').value;
        const usernameError = document.getElementById('usernameError');
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (!emailRegex.test(username.trim())) {
            usernameError.style.display = 'block';
        } else {
            usernameError.style.display = 'none';
        }
    }

    function validatePassword() {
        const password = document.getElementById('password').value;
        const passwordError = document.getElementById('passwordError');

        if (password.trim().length < 4) {
            passwordError.style.display = 'block';
        } else {
            passwordError.style.display = 'none';
        }
    }

    function handleSubmit(event) {
        event.preventDefault(); // フォームのデフォルト送信を防止

        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const submitBtn = document.getElementById('submitBtn');

        // 最終バリデーション
        validateUsername();
        validatePassword();

        if (document.getElementById('usernameError').style.display === 'none' &&
            document.getElementById('passwordError').style.display === 'none') {
            // ボタンを無効化
            submitBtn.disabled = true;

            // 仮のサーバー応答
            setTimeout(() => {
                alert('登録しました！');
                submitBtn.disabled = false;
                document.getElementById('loginForm').reset();
            }, 1000);
        }
    }
</script>

</body>
</html>

このコードのポイントは以下の通りです。

JavaScriptのポイント

  1. バリデーション関数 validateUsername:
    • const username = document.getElementById('username').value; でユーザーが入力したユーザー名（メールアドレス）を取得。
    • const usernameError = document.getElementById('usernameError'); でエラーメッセージを表示する要素を取得。
    • const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; でメールアドレスの形式をチェックする正規表現を定義。
    • if (!emailRegex.test(username.trim())) { ... } で入力されたメールアドレスが正しい形式でない場合、エラーメッセージを表示。正しい形式の場合はエラーメッセージを非表示にします。
  2. バリデーション関数 validatePassword:
    • const password = document.getElementById('password').value; でユーザーが入力したパスワードを取得。
    • const passwordError = document.getElementById('passwordError'); でエラーメッセージを表示する要素を取得。
    • if (password.trim().length < 4) { ... } で入力されたパスワードの長さが4文字未満の場合、エラーメッセージを表示。4文字以上の場合はエラーメッセージを非表示にします。
  3. フォーム送信関数 handleSubmit:
    • event.preventDefault(); でフォームのデフォルト送信を防止。
    • const username = document.getElementById('username').value; と const password = document.getElementById('password').value; で入力されたユーザー名とパスワードを取得。
    • const submitBtn = document.getElementById('submitBtn'); で送信ボタンを取得。
    • validateUsername(); と validatePassword(); で最終的なバリデーションを実行。
    • if (document.getElementById('usernameError').style.display === 'none' && document.getElementById('passwordError').style.display === 'none') { ... } でエラーメッセージが表示されていない（すなわち、バリデーションに成功した）場合の処理を実行。
      • submitBtn.disabled = true; で送信ボタンを無効化。
      • setTimeout(() => { ... }, 1000); で1秒後にサーバー応答をシミュレートし、アラートを表示してフォームをリセット、送信ボタンを再度有効化。

その他のポイント

  • HTML構造:
    • フォームの各入力フィールドには、oninput="validateUsername()" や oninput="validatePassword()" のように、入力イベントが発生するたびにバリデーションを行うように設定されています。
    • エラーメッセージの<div class="error" ...>要素は、デフォルトでは表示されず、バリデーションが失敗した場合に表示されます。
  • CSS:
    • .errorクラスでエラーメッセージのスタイルを設定し、デフォルトでは非表示（display: none）に設定。

以上。

Webアプリケーション制作のための小ネタ集　目次に戻る