入力バリデーション

CoddyのHTMLジャーニー「JavaScript in Action」セクションの一部 — レッスン 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文字未満の場合、ボーダーは赤になり、有効な場合は緑になります。

チャレンジ

簡単

メール入力フィールドのあるページがあります。現在、メール形式のバリデーションは行われていません。

あなたのタスクは、既存の <strong>if</strong> ブロック内の行を完成させて、以下のようにすることです：

メールに "@" が含まれている場合、
入力のボーダーが "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>