入力バリデーション

CoddyのHTMLジャーニー「JavaScriptの実践」セクションの一部。レッスン 5/27。

フォームを作成する際は、ユーザーが入力している間にすぐにフィードバックを提供し、誤った情報を送信しないようにすることが重要です。これはリアルタイム検証と呼ばれます。

まず、基本的なテキスト入力フィールドを作成しましょう。ユーザー名の長さが5文字以上かどうかを確認します。

<input type="text" id="username" placeholder="Enter username">

次に、ユーザーの入力に合わせて入力内容を検証するイベントリスナーを追加します。

const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('input', function() {
    // 現在の値を取得する
    const value = this.value;
    
    // 条件を満たしているか確認する
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

ユーザー名が5文字未満の場合は枠線が赤になり、有効な場合は緑になります。

チャレンジ

簡単

メール入力欄があるページがあります。現在、メールアドレスの形式は検証されません。

既存のifブロック内の行を完成させて、次のようにしてください。

メールアドレスに"@"が含まれる場合、
入力欄の枠線が"2px solid rgb(0, 250, 0)"になります。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <title>Email Validation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <label for="email">Email:</label>
            <input type="text" id="email" placeholder="Enter your email">
        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>