✅ 入力フォームのリアルタイムバリデーション

👇 こういうやつ 👇

👀 実行デモ

<form onsubmit="event.preventDefault()">
  メールアドレス：
  <input type="email" id="email" oninput="validateEmail()">
  <div class="error" id="emailError"></div>

  パスワード（6文字以上）：
  <input type="password" id="password" oninput="validatePassword()">
  <div class="error" id="passwordError"></div>

  <button type="submit">送信</button>
</form>

<style>
  .error {
    color: red;
    font-size: 0.9em;
    margin-bottom: 1em;
  }
</style>

<script>
function validateEmail() {
  const email = document.getElementById("email").value;
  const error = document.getElementById("emailError");
  error.textContent = email.includes("@") ? "" : "メールアドレスの形式が正しくありません";
}

function validatePassword() {
  const pass = document.getElementById("password").value;
  const error = document.getElementById("passwordError");
  error.textContent = pass.length >= 6 ? "" : "6文字以上で入力してください";
}
</script>

✅ このテンプレートの用途・メリット

入力中に即時エラーチェックできる
ユーザーにやさしいUX設計
バリデーションロジックをJSで簡単に実装
初心者にもカスタマイズしやすい構造
実務でも即活用可能な基本形

🧩 フォームバリデーションの実践活用と拡張

リアルタイムバリデーションは、ユーザーが入力するたびに即座に内容を確認できるため、フォーム送信前のストレスを大幅に軽減できます。oninputイベントを活用することで、ページ遷移なしにミスを防ぐ仕組みが作れます。

例えば、validateEmail()ではemail.includes("@")を使って「@」の有無をチェックしています。これだけでも最低限の形式エラーを防げますが、さらにregexを組み合わせればより正確な判定が可能になります。

🔍 バリデーション拡張のヒント

パスワードチェックではpassword.length >= 6だけでなく、/[A-Z]/や/\d/など正規表現を使えば、英数字混在の条件も加えられます。

また、エラー表示のinnerTextはHTMLタグを無視してくれるので、ユーザーに安全かつ明確なメッセージを伝えることができます。複数項目に対して個別エラー表示を行う設計は、UX向上に直結する重要なテクニックです。

このテンプレートは、バリデーションの基礎をしっかり押さえた構成なので、自分の用途に応じて項目追加やスタイル調整を加えながら活用してみてください。